/* Aula Edootek — lo propio del aula encima del patrón gm-*. Sin colores a mano: solo tokens --gm-*. */
.aula-cabecera { background: var(--gm-primary-dark); color: #fff; min-height: 64px; display: flex; align-items: center; gap: 24px; padding: 0 24px; }
.aula-cabecera a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.aula-cabecera .aula-marca { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.aula-cabecera .aula-centro { flex: 1; display: flex; justify-content: center; }
.aula-cabecera .aula-izquierda { display: flex; align-items: center; gap: 20px; }
.aula-cabecera-sep { width: 1px; height: 32px; background: rgba(255,255,255,.35); }
.aula-cabecera .aula-cabecera-nav { flex-direction: column; gap: 2px; font-size: 12px; font-weight: 600; opacity: .95; }
.aula-cabecera .aula-cabecera-nav .material-symbols-outlined { font-size: 22px; }
/* Configuración: desplegable con lo de la cuenta y Salir, como el panel de control de gemind.app */
.aula-config { position: relative; }
.aula-config > summary { list-style: none; cursor: pointer; color: #fff; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.aula-config > summary::-webkit-details-marker { display: none; }
.aula-config > summary:focus-visible { outline: none; box-shadow: var(--gm-halo-foco); border-radius: var(--gm-radius-md); }
.aula-config-panel { position: absolute; right: 0; top: calc(100% + 14px); z-index: 50; min-width: 260px; padding: 8px; display: grid; gap: 2px; box-shadow: var(--gm-shadow-lg); }
.aula-config-quien { padding: 12px 14px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--gm-gray-200); display: grid; gap: 2px; }
.aula-config-quien b { color: var(--gm-texto); font-size: 15px; }
.aula-config-quien small { color: var(--gm-texto-suave); font-size: 12px; }
.aula-cabecera .aula-config-panel a { color: var(--gm-texto-2); font-size: 15px; font-weight: 600; padding: 10px 14px; border-radius: var(--gm-radius-md); gap: 12px; }
.aula-cabecera .aula-config-panel a:hover { background: var(--gm-primary-subtle); color: var(--gm-texto); }
.aula-cabecera .aula-config-panel a .material-symbols-outlined { font-size: 22px; color: var(--gm-primary-dark); }
.aula-cabecera .aula-config-panel a.aula-config-salir { margin-top: 6px; border-top: 1px solid var(--gm-gray-200); border-radius: 0 0 var(--gm-radius-md) var(--gm-radius-md); padding-top: 14px; }
.aula-cabecera .aula-config-panel a.aula-config-salir .material-symbols-outlined { color: var(--gm-error); }
.aula-cabecera.modo-perfil { border-bottom: 3px solid var(--gm-secondary); }
.aula-contenido { max-width: var(--gm-ancho-panel); margin: 0 auto; padding: 32px 24px 64px; }
@media (max-width: 1024px) { .aula-cabecera .aula-etiqueta { display: none; } .aula-cabecera .aula-cabecera-nav span:not(.material-symbols-outlined) { display: none; } }

/* cabecera: quién está dentro */
.aula-quien { display: inline-flex; align-items: center; gap: 12px; }
.aula-quien span > b { display: block; font-size: 15px; font-weight: 700; }
.aula-quien span > small { display: block; font-size: 12px; font-weight: 600; opacity: .9; }
.aula-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--gm-primary-dark); font-weight: 800; font-size: 15px; border: 2px solid rgba(255,255,255,.7); }
.modo-perfil .aula-avatar { border-color: var(--gm-secondary); }
.aula-acciones { display: flex; gap: 20px; }
.aula-pie { margin-top: 48px; padding: 24px; text-align: center; font-size: 13px; color: var(--gm-texto-suave); background: var(--gm-fondo-pie); border-top: 2px solid var(--gm-primary); }
.aula-pie a { color: var(--gm-texto-2); text-decoration: none; }

/* aire entre bloques (32) y textos */
.aula-bloque { margin-top: 32px; }
.aula-bloque-sm { margin-top: 16px; margin-bottom: 24px; }
.aula-parrafo { font-size: 16px; color: var(--gm-texto-2); max-width: var(--gm-ancho-lectura); margin: 0; }
.aula-titulo-bloque { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gm-primary-dark); }
.aula-titulo-bloque .material-symbols-outlined { font-size: 22px; }
.aula-botones { display: flex; gap: 12px; justify-content: flex-end; margin: 32px 0 0; }
.aula-enlace-fuerte { color: var(--gm-primary-dark); font-weight: 700; text-decoration: none; }
.aula-enlace-fuerte:hover { text-decoration: underline; }

/* entrada y salir-perfil: una tarjeta centrada */
.aula-entrada { display: flex; justify-content: center; }
.aula-tarjeta-entrada { max-width: 560px; width: 100%; padding: 40px; }
.aula-tarjeta-entrada .aula-parrafo { margin-bottom: 32px; }
.aula-tarjeta-entrada p:last-child { margin-bottom: 0; }

/* panel de trabajo: grupos de tiles */
.aula-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.aula-grupo { border: 1px solid var(--gm-gray-200); border-radius: var(--gm-radius-lg); padding: 24px; }
.aula-grupo-titulo { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gm-texto-suave); margin-bottom: 16px; }
.aula-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
.aula-tile-pronto { opacity: .75; }
.aula-tile-pronto .gm-pildora { margin-top: 4px; }

/* perfiles */
.aula-perfiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.aula-perfil { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.aula-perfil .aula-avatar { width: 72px; height: 72px; font-size: 26px; border-color: var(--gm-gray-200); }
.aula-perfil.activo { border-color: var(--gm-success); }
.aula-perfil-nombre { font-size: 18px; font-weight: 700; }

/* catálogo */
.aula-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 24px; align-items: end; }
.aula-filtros .gm-campo { margin-bottom: 0; }
.aula-filtros-botones { display: flex; gap: 12px; }
.aula-tabla-envuelta { padding: 0; overflow-x: auto; }

/* estructura de una lección */
.aula-bloque-leccion { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--gm-gray-200); }
.aula-subtitulo { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--gm-texto-2); }
.aula-recursos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.aula-recursos li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.aula-uid { font-size: 12px; color: var(--gm-texto-suave); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 400; }

/* visor de lecciones y cuadernos — «modo enfoque» (17-09-2026)
   Dos estados en .aula-visor-pagina: sin clase, el índice a todo el ancho; con .modo-recurso, el recurso a
   todo el ancho con la barra arriba y el índice como panel deslizante (.panel-abierto). */
.aula-visor-pagina [hidden] { display: none !important; } /* los .gm-btn ponen display y taparían el atributo */
.aula-visor-cab { display: grid; gap: 16px; margin-bottom: 32px; }
.aula-visor-cab .gm-page-title { margin: 0; }
.aula-visor-cab > .gm-btn { justify-self: start; }
.aula-visor-progreso { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; }

/* índice (a todo el ancho; en modo recurso, panel) */
.aula-visor-menu { padding: 32px; display: grid; gap: 40px; align-content: start; }
/* Índice del visor (tres niveles desde el 26-09-2026): .aula-apartados es la rejilla y cada apartado una
   tarjeta .aula-apartado-menu con sus recursos. En el cuaderno, .aula-apartado-titulo es el título de la pieza. */
.aula-apartados { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 16px; align-items: start; }
.aula-apartado-titulo { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gm-primary-dark); }
.aula-apartado-menu { border: 1px solid var(--gm-gray-200); border-radius: var(--gm-radius-lg); padding: 16px; background: var(--gm-superficie); }
.aula-apartado-menu-titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; padding: 0 4px; font-size: 16px; font-weight: 700; color: var(--gm-texto); }
.aula-trofeo { font-size: 20px; color: var(--gm-secondary-dark); visibility: hidden; }
.aula-apartado-menu.completo .aula-trofeo { visibility: visible; }
.aula-apartado-menu.completo { border-color: var(--gm-secondary-light); background: var(--gm-secondary-subtle); }
.aula-recursos-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.aula-recurso { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: 48px; text-align: left; padding: 10px 12px; border: 1.5px solid transparent; border-radius: var(--gm-radius-md); background: transparent; font: 600 15px var(--gm-font-family); color: var(--gm-texto-2); cursor: pointer; transition: background var(--gm-transition), border-color var(--gm-transition); }
.aula-recurso:hover { background: var(--gm-gray-50); }
.aula-recurso:focus-visible { outline: none; box-shadow: var(--gm-halo-foco); }
.aula-recurso.activo { background: var(--gm-primary-subtle); border-color: var(--gm-primary); color: var(--gm-texto); }
.aula-recurso-icono { font-size: 22px; color: var(--gm-primary-dark); }
.aula-recurso-estado { font-size: 20px; color: var(--gm-success); visibility: hidden; }
.aula-recurso.visto .aula-recurso-estado { visibility: visible; color: var(--gm-gray-400); }
.aula-recurso.completado .aula-recurso-estado { visibility: visible; color: var(--gm-success); }
.aula-panel-cab { display: none; }

/* modo recurso: todo el ancho, sin cabecera de la lección */
.aula-visor-pagina.modo-recurso { max-width: none; padding: 24px 24px 48px; }
.modo-recurso .aula-visor-cab { display: none; }
.aula-visor-escenario { display: grid; gap: 16px; }
.aula-barra { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 12px 24px; background: var(--gm-superficie); border: 1px solid var(--gm-gray-200); border-radius: var(--gm-radius-lg); box-shadow: var(--gm-shadow-sm); }
.aula-barra-texto { flex: 1; min-width: 220px; }
.aula-barra-titulo { margin: 0; font-size: 18px; font-weight: 700; color: var(--gm-texto); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aula-barra-sub { margin: 2px 0 0; font-size: 13px; color: var(--gm-texto-suave); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aula-barra-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#aula-marco { display: block; width: 100%; height: calc(100vh - 200px); height: calc(100dvh - 200px); min-height: 480px; border: 0; border-radius: var(--gm-radius-lg); background: #fff; box-shadow: var(--gm-shadow-sm); }
#aula-video { display: block; width: 100%; max-height: calc(100vh - 200px); max-height: calc(100dvh - 200px); border-radius: var(--gm-radius-lg); background: #000; }

/* «Contenido»: el índice como panel deslizante desde la izquierda */
.modo-recurso .aula-visor-menu { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1001; box-sizing: border-box; width: min(480px, calc(100% - 48px)); padding: 0 24px 32px; gap: 32px; overflow-y: auto; overscroll-behavior: contain; border-radius: 0 var(--gm-radius-xl) var(--gm-radius-xl) 0; box-shadow: var(--gm-shadow-lg); transform: translateX(-105%); visibility: hidden; transition: transform .25s ease, visibility .25s; }
.modo-recurso.panel-abierto .aula-visor-menu { transform: none; visibility: visible; }
.modo-recurso .aula-panel-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; position: sticky; top: 0; z-index: 1; margin: 0 -24px; padding: 24px 24px 16px; background: var(--gm-superficie); border-bottom: 1px solid var(--gm-gray-200); }
.aula-panel-titulo { margin: 0; font-size: 20px; font-weight: 800; color: var(--gm-texto); }
.aula-velo { position: fixed; inset: 0; z-index: 1000; background: rgba(17,24,39,.55); }
@media (prefers-reduced-motion: reduce) { .modo-recurso .aula-visor-menu { transition: none; } }

/* pantalla completa: el visor entero (barra incluida) */
.aula-visor:fullscreen { overflow-y: auto; padding: 24px; background: var(--gm-fondo-pagina); }
.aula-visor:-webkit-full-screen { overflow-y: auto; padding: 24px; background: var(--gm-fondo-pagina); }
/* Con un recurso abierto se oculta la cabecera del aula (25-09-2026, decisión de Mikel): la barra del visor
   ya lleva Índice, Anterior y Siguiente, y el recurso gana esos 64 px de alto (los juegos se escalan al hueco). */
body.aula-enfoque .aula-cabecera, body.aula-enfoque .aula-pie { display: none; } /* el pie tampoco: todo en una pantalla, sin scroll */
body.aula-enfoque .aula-visor-pagina.modo-recurso { padding-bottom: 24px; }
body.aula-enfoque #aula-marco { height: calc(100vh - 136px); height: calc(100dvh - 136px); }
.aula-visor:fullscreen #aula-marco { height: calc(100vh - 136px); }
.aula-visor:-webkit-full-screen #aula-marco { height: calc(100vh - 136px); }
.aula-visor:fullscreen #aula-video { max-height: calc(100vh - 136px); }
.aula-visor:-webkit-full-screen #aula-video { max-height: calc(100vh - 136px); }

@media (max-width: 1024px) {
  .aula-visor-menu { padding: 24px; }
  .aula-barra { padding: 12px 16px; }
}

/* asignaciones y progreso */
.aula-progreso { display: grid; gap: 6px; min-width: 160px; }
.aula-progreso-barra { position: relative; height: 8px; border-radius: 999px; background: var(--gm-gray-200); overflow: hidden; }
.aula-progreso-barra i { position: absolute; left: 0; top: 0; height: 100%; display: block; border-radius: 999px; }
.aula-progreso-barra i.v { background: var(--gm-primary); }
.aula-progreso-barra i.c { background: var(--gm-success); }
.aula-progreso-texto { font-size: 13px; color: var(--gm-texto-suave); font-variant-numeric: tabular-nums; }
.aula-asignar-nombre { margin: 0 0 24px; font-size: 16px; font-weight: 700; color: var(--gm-texto); }
.aula-asignar-lista { display: grid; gap: 12px; }
.aula-asignar-perfil { padding-left: 12px; }
.aula-lecciones-perfil { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.aula-leccion-tarjeta { display: grid; gap: 12px; text-decoration: none; color: inherit; align-content: start; }
.aula-leccion-tarjeta .gm-pildora { justify-self: start; }
.aula-leccion-tarjeta .gm-btn { justify-self: start; margin-top: 8px; }
.gm-tabs a { text-decoration: none; }

/* cuadernos */
.aula-cab-accion { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.aula-cab-accion .gm-page-title { margin-bottom: 0; }
.aula-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 1024px) { .aula-editor { grid-template-columns: 1fr; } }
.aula-editor-filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.aula-editor-filtros .gm-campo { margin-bottom: 0; }
.aula-editor-ayuda { margin: 16px 0 12px; }
.aula-editor-lecciones { list-style: none; margin: 0; padding: 0; max-height: 70vh; overflow-y: auto; border: 1px solid var(--gm-gray-200); border-radius: var(--gm-radius-lg); }
.aula-editor-leccion + .aula-editor-leccion { border-top: 1px solid var(--gm-gray-200); }
.aula-editor-leccion-fila { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 4px; }
.aula-editor-desplegar { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; text-align: left; background: none; border: 0; padding: 8px; border-radius: var(--gm-radius-md); font: 600 15px var(--gm-font-family); color: var(--gm-texto); cursor: pointer; }
.aula-editor-desplegar .gm-help { grid-column: 2; margin: 0; }
.aula-editor-desplegar .material-symbols-outlined { grid-row: span 2; color: var(--gm-texto-suave); transition: transform var(--gm-transition); }
.aula-editor-desplegar[aria-expanded="true"] .material-symbols-outlined { transform: rotate(90deg); }
.aula-editor-desplegar:hover { background: var(--gm-gray-50); }
.aula-editor-desplegar:focus-visible { outline: none; box-shadow: var(--gm-halo-foco); }
.aula-editor-arbol { padding: 0 12px 12px 40px; display: grid; gap: 8px; }
.aula-editor-apartado { display: grid; gap: 6px; }
.aula-editor-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
.aula-editor-bloque { padding-left: 24px; }
.aula-editor-nombre { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--gm-texto-2); }
.aula-editor-nombre .material-symbols-outlined { font-size: 20px; color: var(--gm-primary-dark); }
.aula-editor-sub { display: flex; align-items: center; gap: 10px; margin: 32px 0 12px; font-size: 16px; font-weight: 700; }
.aula-editor-piezas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: pieza; }
.aula-editor-pieza { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--gm-gray-200); border-radius: var(--gm-radius-lg); background: #fff; }
.aula-editor-pieza.arrastrando { opacity: .5; }
.aula-editor-pieza.sobre { border-color: var(--gm-primary); box-shadow: var(--gm-halo-campo); }
.aula-editor-asa { color: var(--gm-gray-400); cursor: grab; }
.aula-editor-pieza-texto { display: grid; gap: 6px; min-width: 0; }
.aula-editor-pieza-texto .gm-pildora { justify-self: start; }
.aula-editor-pieza-titulo { min-height: 36px; font-size: 14px; }
.aula-editor-pieza-botones { display: flex; gap: 2px; }
.aula-editor-quitar:hover { color: var(--gm-error-text); background: var(--gm-error-subtle); }
.aula-editor-vacio { padding: 32px 24px; }
.aula-pieza-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gm-primary-dark); color: #fff; font-size: 12px; margin-right: 4px; }

/* desplegables (cuadernos, asignar) */
.aula-botones-cab { display: flex; gap: 12px; flex-wrap: wrap; }
.aula-desplegables { display: grid; gap: 16px; }
.aula-desplegable > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 16px; font-weight: 700; color: var(--gm-texto); list-style: none; padding: 4px 0; }
.aula-desplegable > summary::-webkit-details-marker { display: none; }
.aula-desplegable > summary::before { content: "chevron_right"; font-family: "Material Symbols Outlined"; letter-spacing: normal; text-transform: none; font-size: 22px; color: var(--gm-texto-suave); transition: transform var(--gm-transition); }
.aula-desplegable[open] > summary::before { transform: rotate(90deg); }
.aula-desplegable > summary .material-symbols-outlined { color: var(--gm-primary-dark); font-size: 22px; }
.aula-desplegable > summary:focus-visible { outline: none; box-shadow: var(--gm-halo-foco); border-radius: var(--gm-radius-md); }
.aula-desplegable > .aula-tabla-envuelta, .aula-desplegable > .aula-desplegable-hija, .aula-desplegable > .aula-lista-elegir, .aula-desplegable > .aula-desplegable-vacio { margin-top: 16px; }
.aula-desplegable-hija { padding-left: 24px; }
.aula-desplegable-hija > summary { font-size: 15px; }
.aula-desplegable-nieta { padding-left: 24px; }
.aula-desplegable-nieta > summary { font-size: 14px; font-weight: 600; color: var(--gm-texto-2); }
.aula-tema-titulo { margin: 16px 0 8px 24px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gm-primary-dark); }
.aula-tema-titulo .gm-help { display: inline; margin: 0; text-transform: none; letter-spacing: 0; }
.aula-lista-elegir { list-style: none; margin: 0; padding: 0 0 0 24px; display: grid; gap: 8px; }
.aula-lista-elegir li { display: flex; align-items: center; gap: 8px; }
.aula-lista-elegir .gm-check { font-size: 15px; }
.aula-ver { color: var(--gm-texto-suave); display: inline-flex; }
.aula-ver .material-symbols-outlined { font-size: 18px; }
.aula-asignar { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
@media (max-width: 1024px) { .aula-asignar { grid-template-columns: 1fr; } }
.aula-asignar-quien-caja { position: sticky; top: 24px; }
.aula-sistema-caja { margin-bottom: 24px; padding: 16px 20px; background: var(--gm-secondary-subtle); border-color: var(--gm-secondary-light); }
.aula-sistema-caja .aula-editor-filtros { margin-top: 16px; }
.aula-categorias { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.aula-categoria-fila { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 10px; align-items: center; }
.aula-categoria.nivel-2 { padding-left: 32px; }
.aula-categoria-fila .material-symbols-outlined { color: var(--gm-primary-dark); }
.aula-categoria-fila .gm-input { min-height: 36px; font-size: 14px; }

/* informes */
.aula-periodos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.aula-periodos .gm-pildora { text-decoration: none; }
.aula-tiles-informe { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.aula-tile-dato { display: grid; gap: 6px; padding: 20px; text-align: center; }
.aula-dato { font-size: 32px; font-weight: 800; color: var(--gm-primary-dark); font-variant-numeric: tabular-nums; line-height: 1.1; }
.aula-dato-etiqueta { font-size: 13px; color: var(--gm-texto-suave); }
.aula-fila-actual td { background: var(--gm-primary-subtle); }
@media print {
  .aula-cabecera, .aula-pie, .aula-no-imprimir, .aula-cab-accion .gm-btn { display: none !important; }
  body { background: #fff; } .aula-contenido { padding: 0; max-width: none; }
  .gm-card { box-shadow: none; break-inside: avoid; } .aula-bloque { margin-top: 20px; }
}

/* home «a lo GEMIND» (25-09-2026): secciones plegables, programas y asignaturas con portadas de curso.
   Solo se ve con ?home=nueva mientras se monta. El color de cada asignatura llega en --ac (inline). */
.aula-home { max-width: 1100px; display: grid; gap: 32px; }
.aula-home > .gm-aviso { margin: 0; }
.aula-seccion { padding: 0; border: 2px solid var(--gm-gray-400); } /* como .gm-seccion de GEMIND: 2 px gris */
.aula-seccion > summary, .aula-area > summary { display: flex; align-items: center; gap: 12px; padding: 20px 24px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gm-primary-dark); }
.aula-seccion > summary::-webkit-details-marker, .aula-area > summary::-webkit-details-marker { display: none; }
.aula-seccion > summary::after, .aula-area > summary::after { content: "expand_more"; font-family: "Material Symbols Outlined"; letter-spacing: normal; text-transform: none; /* el summary lleva .06em y mayúsculas: el letter-spacing rompe la ligadura (01-10-2026) */ font-size: 24px; margin-left: auto; color: var(--gm-texto-suave); transition: transform var(--gm-transition); }
.aula-seccion[open] > summary::after, .aula-area[open] > summary::after { transform: rotate(180deg); }
.aula-seccion > summary:focus-visible, .aula-area > summary:focus-visible { outline: none; box-shadow: inset var(--gm-halo-foco); }
.aula-seccion > summary .material-symbols-outlined { font-size: 24px; }
.aula-seccion-cuerpo { padding: 8px 24px 32px; border-top: 1px solid var(--gm-gray-200); }
/* Títulos de sección de la portada (Panel de trabajo, Programas de aprendizaje, Asignaturas): más grandes (Mikel, 29-09-2026),
   en el rosa de siempre (vuelta atrás del azul petróleo, 30-09-2026). Las tarjetas de asignatura (.aula-area) siguen con su color.
   El tamaño de «Asignaturas» lo fija su propia regla (.aula-seccion-titulo .aula-titulo-bloque), más abajo. */
.aula-seccion > summary, .aula-seccion-titulo .aula-titulo-bloque { font-size: 16px; font-weight: 800; color: var(--gm-primary-dark); }
.aula-seccion > summary .material-symbols-outlined, .aula-seccion-titulo .aula-titulo-bloque .material-symbols-outlined { font-size: 28px; color: var(--gm-primary-dark); }
.aula-seccion[open] .aula-seccion-cuerpo { padding-top: 24px; }
.aula-grupos-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aula-tiles-par { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aula-tiles-uno { grid-template-columns: minmax(0, 1fr); }
.aula-tiles-cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1024px) { .aula-tiles-cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aula-tabs-cuadernos { margin-bottom: 32px; }
.aula-tabs-cuadernos .gm-tab { text-decoration: none; }
.aula-guia { padding: 32px 40px 40px; }
.aula-guia .aula-parrafo { margin-bottom: 28px; }
.aula-guia-pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; display: grid; gap: 20px; max-width: 72ch; }
.aula-guia-pasos li { position: relative; padding-left: 56px; font-size: 16px; line-height: 1.55; color: var(--gm-texto-2); }
.aula-guia-pasos li b { color: var(--gm-texto); }
.aula-guia-pasos li::before { counter-increment: paso; content: counter(paso); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--gm-primary); color: #fff; font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.aula-guia .aula-botones { margin-top: 32px; }
.aula-home .gm-tile { padding: 28px 12px; border: 2px solid var(--gm-primary-dark); } /* como .gm-accion de GEMIND */
.aula-programas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.aula-programa { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 16px 24px; text-align: center; text-decoration: none; color: var(--gm-texto); font-weight: 700; font-size: 15px; border: 2px solid var(--gm-primary-dark); } /* como .gm-mod.activo de GEMIND */
.aula-programa-icono { font-size: 40px; color: var(--gm-primary-dark); }
.aula-programa-ia { position: absolute; top: 12px; left: 12px; }
.aula-programa-pronto { color: var(--gm-texto-suave); } /* mismo borde turquesa aunque aún no esté: lo pidió Mikel el 25-09 */
.aula-programa-pronto .aula-programa-icono { color: var(--gm-gray-400); }
.aula-seccion-titulo { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 8px; }
.aula-seccion-titulo .aula-titulo-bloque { margin: 0; font-size: 16px; } /* 16 como los otros dos títulos (30-09-2026; estaba en 13 y pisaba la regla de arriba) */
.aula-seccion-acciones { display: flex; gap: 12px; }
.aula-areas { display: grid; gap: 16px; }
.aula-area { padding: 0; border: 2px solid var(--gm-gray-400); border-left: 7px solid var(--ac); } /* como .gm-acordeon de GEMIND */
.aula-area > summary { text-transform: none; letter-spacing: 0; font-size: 18px; font-weight: 800; color: var(--gm-texto); flex-wrap: wrap; }
.aula-area-icono { font-size: 26px; color: var(--ac); }
.aula-area-datos { display: flex; gap: 8px; flex-wrap: wrap; margin-left: 8px; }
.aula-area-datos .gm-pildora .material-symbols-outlined { font-size: 16px; }
.aula-area-cuerpo { padding: 24px 24px 32px; border-top: 1px solid var(--gm-gray-200); }
.aula-portadas { display: grid; gap: 16px; }
.aula-portada { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform var(--gm-transition), box-shadow var(--gm-transition); }
.aula-portada:hover { transform: translateY(-2px); box-shadow: var(--gm-shadow-md); }
.aula-portada:focus-visible { outline: none; box-shadow: var(--gm-halo-foco); }
.aula-area .gm-nivel-cab { --ac: inherit; } /* los tokens fijan --ac en la cabecera; aquí manda el de la asignatura */
/* La asignatura en una línea; si alguna vez no cabe, puntos suspensivos antes que partirla. */
.aula-portada .gm-nivel-cab .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aula-portada .gm-nivel-cab .l { text-transform: none; letter-spacing: 0; font-size: 13px; }

/* Portada de TRES por fila (25-09-2026, prueba de Mikel): así las asignaturas de tres cursos llenan una fila
   y las de seis, dos. Cabecera como la de los tokens (texto | número) y en el pie lecciones, áreas y los
   recursos por tipo en filas de tres. La anterior sigue debajo (.aula-portadas-columna, ?portadas=antes). */
.aula-portadas-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.aula-portadas-tres .gm-nivel-cab { align-items: center; gap: 16px; min-height: 0; padding: 20px 24px; }
.aula-portadas-tres .gm-nivel-cab > div:first-child { min-width: 0; } /* si aprieta, cede el texto, nunca el número */
.aula-portadas-tres .gm-nivel-cab .t { font-size: 16px; }
.aula-portadas-tres .gm-nivel-cab .l { font-size: 14px; }
.aula-portadas-tres .gm-nivel-pie { flex: 1; display: grid; align-content: start; gap: 20px; padding: 20px 24px 24px; text-align: left; }
.aula-portada-resumen { font-size: 14px; font-weight: 700; color: var(--gm-texto-2); }
/* Columnas iguales mientras quepan; si aprietan (tablet), ninguna más estrecha que su texto («cuestionarios»). */
.aula-portada-tipos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(max-content, 1fr)); gap: 16px 12px; }
.aula-portada-tipos li { display: grid; gap: 2px; min-width: 0; }
.aula-portada-tipo-n { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 800; line-height: 1.2; color: var(--gm-texto); }
.aula-portada-tipo-n .material-symbols-outlined { font-size: 20px; color: var(--ac); }
.aula-portada-tipo-l { font-size: 12px; color: var(--gm-texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Portada en columna, seis por fila (la anterior): asignatura y curso arriba con todo el ancho, número abajo a la derecha. */
.aula-portadas-columna { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); }
.aula-portadas-columna .gm-nivel-cab { flex: 1; display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 16px 16px 12px; }
.aula-portadas-columna .gm-nivel-cab .n { align-self: flex-end; margin-top: auto; padding-top: 8px; }
.aula-portadas-columna .gm-nivel-cab .t { font-size: 14px; } /* a 14 px «Ciencias naturales» (121 px) cabe en los 126 que deja */
.aula-portadas-columna .gm-nivel-pie { display: grid; gap: 2px; padding: 10px 8px; }
@media (max-width: 900px) { .aula-portadas-tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* tablet en vertical */
@media (max-width: 1024px) {
  .aula-grupos-tres { grid-template-columns: 1fr; }
  .aula-programas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aula-portadas-columna { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 600px) {
  .aula-programas { grid-template-columns: 1fr; }
  .aula-portadas-columna { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aula-portadas-tres { grid-template-columns: 1fr; }
  .aula-seccion > summary, .aula-area > summary { padding: 16px; }
  .aula-seccion-cuerpo, .aula-area-cuerpo { padding-left: 16px; padding-right: 16px; }
}

/* Página de curso (25-09-2026): cabecera del color de la asignatura (--ac) con los otros cursos, filtro por
   área y las lecciones en tarjetas por área. --area es el color del área, el de edootek.com: va en puntos y
   en el fondo del número (con texto oscuro), nunca como color de texto, porque el amarillo no se lee en blanco. */
.aula-curso { max-width: 1100px; display: grid; gap: 32px; }
.aula-curso-cab { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 24px; padding: 28px 32px; border-radius: var(--gm-radius-lg); background: var(--ac); color: #fff; box-shadow: var(--gm-shadow-sm); }
.aula-curso-titulo { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 28px; font-weight: 800; line-height: 1.2; }
.aula-curso-titulo .material-symbols-outlined { font-size: 32px; }
.aula-curso-sub { margin: 6px 0 0; font-size: 16px; font-weight: 600; opacity: .92; }
.aula-curso-n { font-size: 72px; font-weight: 800; line-height: .85; }
.aula-curso-cursos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .3); }
.aula-curso-cursos-etiqueta { margin-right: 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.aula-curso-cursos a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 40px; padding: 0 12px; border-radius: var(--gm-radius-pill); background: rgba(255, 255, 255, .18); color: #fff; font-size: 16px; font-weight: 800; text-decoration: none; transition: background var(--gm-transition); }
.aula-curso-cursos a:hover { background: rgba(255, 255, 255, .32); }
.aula-curso-cursos a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.aula-curso-cursos a.activo { background: #fff; color: var(--gm-gray-900); }
.aula-curso-barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.aula-curso-filtro { display: flex; flex-wrap: wrap; gap: 12px; }
.aula-curso-barra > .gm-btn { margin-left: auto; } /* a la derecha también cuando no hay filtro (asignaturas de un área) */
.aula-curso-filtro button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1.5px solid var(--gm-gray-300); border-radius: var(--gm-radius-pill); background: #fff; font: 700 14px var(--gm-font-family); color: var(--gm-texto-2); cursor: pointer; transition: border-color var(--gm-transition), background var(--gm-transition); }
.aula-curso-filtro button:hover { border-color: var(--gm-gray-500); }
.aula-curso-filtro button:focus-visible { outline: none; box-shadow: var(--gm-halo-foco); }
.aula-curso-filtro button[aria-pressed="true"] { border-color: var(--gm-gray-900); background: var(--gm-gray-900); color: #fff; }
.aula-curso-filtro-n { font-weight: 600; opacity: .7; }
.aula-punto { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--area); }
.aula-curso-area { display: grid; gap: 20px; }
.aula-curso-area[hidden] { display: none; }
.aula-curso-area + .aula-curso-area { margin-top: 8px; } /* con el hueco general de 32, entre áreas quedan 40 */
.aula-curso-area-titulo { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gm-texto); }
.aula-curso-area-titulo span { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--gm-texto-suave); }
.aula-curso-lecciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.aula-leccion-tarjeta { display: flex; flex-direction: column; gap: 14px; padding: 20px 24px 22px; text-decoration: none; color: var(--gm-texto); }
.aula-leccion-tarjeta:focus-visible { outline: none; box-shadow: var(--gm-halo-foco); }
.aula-leccion-arriba { display: flex; align-items: center; gap: 12px; }
.aula-leccion-num { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 36px; padding: 0 8px; border-radius: 10px; background: var(--area); color: var(--gm-gray-900); font-size: 17px; font-weight: 800; }
.aula-leccion-apartados { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--gm-texto-suave); }
.aula-leccion-nombre { font-size: 17px; font-weight: 800; line-height: 1.3; }
.aula-leccion-tipos { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--gm-gray-200); font-size: 14px; font-weight: 700; color: var(--gm-texto-2); }
.aula-leccion-tipos > span { display: inline-flex; align-items: center; gap: 4px; }
.aula-leccion-tipos .material-symbols-outlined { font-size: 18px; color: var(--ac); }
.aula-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 1024px) { .aula-curso-lecciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .aula-curso-lecciones { grid-template-columns: 1fr; }
  .aula-curso-cab { padding: 24px; }
  .aula-curso-n { font-size: 56px; }
}

/* «Mis alumnos» (etapa 14, 25-09-2026): copia de la pantalla de GEMIND con el patrón del aula.
   Tarjeta por alumno: avatar grande, datos, acciones a la derecha y debajo los interruptores de programas. */
.aula-alumnos { display: grid; gap: 24px; }
.aula-alumno { padding: 28px 32px; }
.aula-alumno.inactivo { background: var(--gm-gray-50); }
.aula-alumno.inactivo .aula-alumno-avatar { filter: grayscale(1); opacity: .7; }
.aula-alumno-cab { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: start; }
.aula-alumno-avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gm-gray-200); background: #fff; }
.aula-alumno-avatar-letra { display: inline-flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 800; color: var(--gm-primary-dark); background: var(--gm-primary-subtle); }
.aula-alumno-nombre { margin: 4px 0 16px; font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.aula-alumno-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, max-content)); gap: 12px 40px; margin: 0; }
.aula-alumno-meta dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gm-texto-suave); margin-bottom: 4px; }
.aula-alumno-meta dd { margin: 0; font-size: 16px; font-weight: 600; color: var(--gm-texto); }
.aula-alumno-puntos { letter-spacing: 3px; }
.aula-alumno-acciones { display: flex; flex-direction: column; gap: 12px; align-items: stretch; min-width: 180px; }
.aula-alumno-acciones form { display: contents; }
.aula-alumno-acciones .gm-btn { justify-content: flex-start; }
.aula-alumno-programas { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--gm-gray-200); }
.aula-alumno-interruptores { display: flex; flex-wrap: wrap; gap: 16px 32px; margin-top: 12px; }
.aula-alumno-interruptores .gm-switch .material-symbols-outlined { font-size: 20px; color: var(--gm-primary-dark); }
.aula-tab-inactivos { margin-left: auto; }
@media (max-width: 760px) {
  .aula-alumno { padding: 24px; }
  .aula-alumno-cab { grid-template-columns: auto 1fr; }
  .aula-alumno-acciones { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}
/* formulario del alumno: avatar a la izquierda, campos a la derecha */
.aula-alumno-form { display: grid; grid-template-columns: 180px 1fr; gap: 32px; align-items: start; }
.aula-alumno-form-avatar { display: grid; gap: 16px; justify-items: center; }
.aula-avatar-elegir { width: 140px; height: 140px; border-radius: 50%; border: 3px dashed var(--gm-gray-300); background: var(--gm-gray-50); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; overflow: hidden; }
.aula-avatar-elegir:hover { border-color: var(--gm-primary); }
.aula-avatar-elegir:focus-visible { outline: none; box-shadow: var(--gm-halo-foco); }
.aula-avatar-elegir img { width: 100%; height: 100%; object-fit: cover; }
.aula-avatar-vacio { font-size: 56px; color: var(--gm-gray-400); }
.aula-alumno-form-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.aula-alumno-form .gm-aviso { margin-top: 4px; }
@media (max-width: 640px) { .aula-alumno-form, .aula-alumno-form-fila { grid-template-columns: 1fr; } }
/* galería de avatares */
.aula-modal-avatares .gm-tabs { padding: 0 24px; flex-wrap: wrap; overflow: visible; }
.aula-avatares-cuerpo { max-height: 60vh; overflow-y: auto; }
.aula-avatares-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 16px; }
.aula-avatar-opcion { padding: 6px; border: 3px solid transparent; border-radius: 50%; background: none; cursor: pointer; }
.aula-avatar-opcion img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; display: block; }
.aula-avatar-opcion:hover { border-color: var(--gm-gray-300); }
.aula-avatar-opcion.elegido { border-color: var(--gm-primary); background: var(--gm-primary-subtle); }
.aula-avatar-opcion:focus-visible { outline: none; box-shadow: var(--gm-halo-foco); }
/* la clave recién generada */
.aula-clave-quien { margin: 0 0 20px; }
.aula-clave-datos { display: grid; gap: 20px; margin: 0 0 28px; }
.aula-clave-datos dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gm-texto-suave); margin-bottom: 6px; }
.aula-clave-datos dd { margin: 0; }
.aula-clave-valor { font-size: 22px; font-weight: 800; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--gm-texto); }
.aula-clave-grande { font-size: 40px; letter-spacing: 6px; color: var(--gm-primary-dark); }
.aula-clave-palabras { margin-top: 6px !important; font-size: 18px; font-weight: 700; color: var(--gm-texto-2); }
/* cabecera de página con título a la izquierda y acción a la derecha (Mis alumnos) */
.aula-cab-pagina { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; }
.aula-cab-pagina .gm-page-title { margin: 0; }
.aula-alumnos-pagina .aula-parrafo { margin-bottom: 8px; }
/* entrada del alumno (etapa 14, paso 3) */
.aula-entrada-botones { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.aula-clave-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 22px; letter-spacing: 4px; text-transform: uppercase; }
.aula-entrada-otro { margin-top: 24px; }
.aula-enlace-boton { background: none; border: 0; padding: 0; font: inherit; color: var(--gm-primary-dark); font-weight: 700; cursor: pointer; text-decoration: underline; }
.aula-salir-alumno { display: inline; }
.aula-salir-alumno button { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.aula-cabecera .aula-acciones > a, .aula-salir-alumno button { text-decoration: none; }
/* Acceder (25-09-2026): como gemind.app/acceder/: fondo de color, tarjeta centrada con dos columnas, sin cabecera ni pie */
body.aula-acceder-pagina { background: linear-gradient(135deg, var(--gm-primary) 0%, var(--gm-primary-light, #4dd4da) 100%); min-height: 100vh; }
body.aula-acceder-pagina .aula-cabecera, body.aula-acceder-pagina .aula-pie { display: none; }
.aula-acceder { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 24px; }
.aula-acceder-tarjeta { width: 100%; max-width: 1000px; padding: 48px; box-shadow: var(--gm-shadow-lg); }
.aula-acceder-logo { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 26px; font-weight: 800; color: var(--gm-primary-dark); margin-bottom: 40px; }
.aula-acceder-logo .material-symbols-outlined { font-size: 32px; }
.aula-acceder-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.aula-acceder-col:first-child { padding-right: 48px; border-right: 1px solid var(--gm-gray-200); }
.aula-acceder-titulo { margin: 0 0 28px; font-size: 22px; font-weight: 800; color: var(--gm-texto); }
.aula-acceder-cuenta { color: var(--gm-primary-dark); }
.aula-acceder-alumno { color: var(--gm-secondary-dark); }
.aula-acceder-form .gm-aviso { margin-bottom: 24px; }
.aula-campo-icono { position: relative; }
.aula-campo-icono > .material-symbols-outlined:first-child { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--gm-gray-400); font-size: 22px; pointer-events: none; }
.aula-campo-icono .gm-input { padding-left: 46px; padding-right: 46px; }
.aula-ver-clave { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 6px; cursor: pointer; color: var(--gm-gray-500); display: inline-flex; border-radius: 50%; }
.aula-ver-clave:hover { color: var(--gm-primary-dark); background: var(--gm-gray-100); }
.aula-ver-clave:focus-visible { outline: none; box-shadow: var(--gm-halo-foco); }
.aula-acceder-fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: -4px 0 28px; }
.aula-acceder-enlace { color: var(--gm-primary-dark); font-weight: 700; font-size: 14px; text-decoration: none; }
.aula-acceder-enlace:hover { text-decoration: underline; }
.aula-acceder-ayuda { margin: -4px 0 28px; }
.aula-acceder-boton { width: 100%; justify-content: center; }
.aula-acceder-pie { margin: 24px 0 0; text-align: center; }
.aula-acceder-col .aula-clave-input { font-size: 18px; letter-spacing: 3px; }
@media (max-width: 760px) {
  .aula-acceder-tarjeta { padding: 32px 24px; }
  .aula-acceder-columnas { grid-template-columns: 1fr; gap: 40px; }
  .aula-acceder-col:first-child { padding-right: 0; padding-bottom: 40px; border-right: 0; border-bottom: 1px solid var(--gm-gray-200); }
}
/* selector de alumno en la cabecera (como GEMIND): diálogo con la cuenta y los alumnos */
button.aula-quien { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.aula-quien:focus-visible { outline: none; box-shadow: var(--gm-halo-foco); border-radius: var(--gm-radius-md); }
.aula-selector-tabs { padding: 0 24px; flex-wrap: wrap; overflow: visible; }
.aula-selector-cuerpo { max-height: 60vh; overflow-y: auto; }
.aula-selector-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
.aula-selector-form { display: contents; }
.aula-selector-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 12px; background: #fff; border: 2px solid var(--gm-gray-200); border-radius: var(--gm-radius-lg); cursor: pointer; font: inherit; color: var(--gm-texto); text-align: center; }
.aula-selector-tile:hover { border-color: var(--gm-primary); background: var(--gm-primary-subtle); }
.aula-selector-tile:focus-visible { outline: none; box-shadow: var(--gm-halo-foco); }
.aula-selector-tile.actual { border-color: var(--gm-success); }
.aula-selector-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; font-size: 28px; border: 3px solid var(--gm-gray-200); }
.aula-selector-nombre { font-size: 15px; font-weight: 700; line-height: 1.3; }
.aula-selector-curso { font-size: 12px; color: var(--gm-texto-suave); }
.aula-selector-pie { justify-content: center; }
/* grupos de alumnos (25-09-2026) */
.aula-alumnos-filtro-grupo { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.aula-alumnos-filtro-grupo .gm-label { margin: 0; }
.aula-alumnos-filtro-grupo .gm-select { width: auto; min-width: 220px; }
.aula-grupos-cuerpo { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: 40px; align-items: start; margin-top: 28px; }
.aula-grupo-nuevo .gm-campo { margin-bottom: 16px; }
.aula-grupos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.aula-grupo-fila { display: flex; align-items: center; gap: 12px; }
.aula-grupo-fila .gm-input { flex: 1; }
.aula-grupo-fila > .material-symbols-outlined { color: var(--gm-primary-dark); }
@media (max-width: 760px) { .aula-grupos-cuerpo { grid-template-columns: 1fr; gap: 32px; } }
.aula-asignar-grupo-titulo { margin: 16px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gm-texto-suave); }
.aula-asignar-grupo-titulo:first-of-type { margin-top: 12px; }
.aula-asignar-grupo .material-symbols-outlined { font-size: 18px; color: var(--gm-primary-dark); }
.aula-filtro-grupos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.aula-filtro-grupos .gm-label { margin: 0 8px 0 0; }
.aula-selector-grupos { display: flex; align-items: center; gap: 12px; padding: 16px 24px 0; }
.aula-selector-grupos .gm-label { margin: 0; }
.aula-selector-grupos .gm-select { width: auto; min-width: 220px; }
.aula-filtro-grupos a { text-decoration: none; }
.aula-grupo-alumnos-ayuda { margin-bottom: 20px; }
.aula-grupo-alumnos-todos { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--gm-gray-200); }
.aula-grupo-alumnos-lista { max-height: 50vh; overflow-y: auto; }

/* Fichas de papel (26-09-2026, proyecto /opt/descargables): bloque «Para repasar en papel» al final del índice
   del visor, diálogos de ficha y resumen, página /fichas/ de la cuenta y página de imprimir. */
.aula-papel [hidden], .aula-fichas-pagina [hidden] { display: none !important; } /* los .gm-btn ponen display y taparían el atributo */
.aula-papel { border: 2px solid var(--gm-primary); border-radius: var(--gm-radius-lg); padding: 28px; background: var(--gm-superficie); display: grid; gap: 28px; }
.modo-recurso .aula-papel { display: none; } /* en el panel deslizante solo el índice */
.aula-papel-cab { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.aula-papel-icono { width: 52px; height: 52px; border-radius: 14px; background: var(--gm-secondary-subtle); color: var(--gm-warning-text); display: grid; place-items: center; flex: none; }
.aula-papel-icono .material-symbols-outlined { font-size: 28px; }
.aula-papel-texto { flex: 1 1 320px; }
.aula-papel-texto h3 { margin: 0; font-size: 22px; font-weight: 800; color: var(--gm-texto); }
.aula-papel-texto p { margin: 6px 0 0; color: var(--gm-texto-suave); font-size: 16px; max-width: 60ch; }
.aula-papel-contador { margin-left: auto; text-align: right; font-size: 14px; color: var(--gm-texto-suave); }
.aula-papel-contador b { display: block; font-size: 26px; color: var(--gm-texto); font-variant-numeric: tabular-nums; line-height: 1.1; }
.aula-papel-botones { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; }
.aula-fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 24px; }
.aula-ficha { display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--gm-gray-200); border-radius: var(--gm-radius-lg); padding: 16px; background: var(--gm-superficie); }
.aula-ficha.pedida { border-color: var(--gm-warning); }
.aula-ficha.hecha, .aula-ficha.corregida { border-color: var(--gm-success); background: var(--gm-success-subtle); }
.aula-ficha-th { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--gm-gray-200); border-radius: 8px; overflow: hidden; background: #fff; aspect-ratio: 1.414; cursor: zoom-in; }
.aula-ficha-th img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.aula-ficha-lupa { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; background: rgba(17, 24, 39, .75); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.aula-ficha-lupa .material-symbols-outlined { font-size: 16px; }
.aula-ficha-titulo { margin: 0; font-size: 15px; font-weight: 800; color: var(--gm-texto); line-height: 1.3; }
.aula-ficha-enunciado { margin: 0; font-size: 13.5px; color: var(--gm-texto-suave); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.aula-ficha-pie { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.aula-ficha-estado { align-self: flex-start; background: var(--gm-gray-100); color: var(--gm-texto-2); }
.aula-ficha.pedida .aula-ficha-estado { background: var(--gm-warning-subtle); color: var(--gm-warning-text); }
.aula-ficha.hecha .aula-ficha-estado, .aula-ficha.corregida .aula-ficha-estado { background: var(--gm-success-subtle); color: var(--gm-success-text); }
.aula-ficha-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.aula-ficha-dlg.gm-modal-ancho { max-width: min(96vw, 1100px); }
.aula-ficha-dlg-img { width: 100%; height: auto; display: block; border: 1px solid var(--gm-gray-200); border-radius: 8px; background: #fff; }
.aula-ficha-dlg-texto { margin: 0 0 16px; color: var(--gm-texto-suave); }
.aula-ficha-dlg-texto:empty { display: none; }
.aula-resumen-tabs { margin-bottom: 16px; }
.aula-resumen-imprimir { margin: 16px 0 0; }
/* Resumen del tema (28-09-2026): el apunte entero en pantalla, vertical u horizontal. La imagen se ajusta al alto
   que dejan la cabecera, las pestañas e «Imprimir» (unos 300px) y se centra; si aun así no cabe (pestañas en dos
   líneas, pantalla muy baja), el diálogo se desplaza en vez de cortarse (.gm-modal lleva overflow:hidden).
   «Ver grande» de fichas y soluciones, igual: cada hoja entera (reserva menor, sin pestañas ni «Imprimir»), y las
   hojas siguientes debajo, a las que se llega desplazando. Solo márgenes laterales: las siguientes traen margin-top. */
#aula-dlg-resumen, #aula-dlg-ficha { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
#aula-dlg-resumen .aula-ficha-dlg-img { width: auto; max-width: 100%; margin: 0 auto; max-height: calc(100vh - 300px); max-height: max(calc(100dvh - 300px), 320px); }
#aula-dlg-ficha .aula-ficha-dlg-img { width: auto; max-width: 100%; margin-left: auto; margin-right: auto; max-height: calc(100vh - 240px); max-height: max(calc(100dvh - 240px), 320px); }
.aula-fichas-aviso { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2000; max-width: min(90vw, 480px); }
/* página /fichas/ */
.aula-fichas-alumno { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--gm-texto); white-space: nowrap; }
.aula-fichas-alumno .aula-avatar { width: 32px; height: 32px; font-size: 14px; }
.aula-fichas-celda { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.aula-fichas-celda b { display: block; color: var(--gm-texto); }
.aula-fichas-celda small { display: block; margin: 0; }
.aula-fichas-mini { padding: 0; border: 1px solid var(--gm-gray-200); border-radius: 6px; background: #fff; width: 84px; aspect-ratio: 1.414; overflow: hidden; cursor: zoom-in; flex: none; }
.aula-fichas-mini img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.aula-fichas-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.aula-fichas-ajustes { padding: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.aula-fichas-ajuste { align-items: flex-start; border: 1px solid var(--gm-gray-200); border-radius: var(--gm-radius-lg); padding: 14px; }
.aula-fichas-ajuste input { flex: none; margin-top: 2px; }
.aula-fichas-ajuste b { display: block; color: var(--gm-texto); }
.aula-fichas-ajuste b .material-symbols-outlined { font-size: 18px; vertical-align: -3px; }
.aula-fichas-ajuste small { display: block; color: var(--gm-texto-suave); font-weight: 400; }
.aula-fichas-ajuste.apagado { background: var(--gm-gray-50); }
.aula-tiles-cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1024px) { .aula-tiles-cinco { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aula-tile-pildora { margin-top: 8px; }
/* página de imprimir: una ficha por hoja, apaisada o vertical según la ficha */
.aula-imprimir-hojas { display: grid; gap: 24px; }
.aula-imprimir-hoja { margin: 0; background: #fff; border: 1px solid var(--gm-gray-200); border-radius: 8px; padding: 12px; }
.aula-imprimir-hoja img { width: 100%; height: auto; display: block; }
.aula-imprimir-hoja figcaption { padding-top: 8px; font-size: 12px; color: var(--gm-texto-suave); }
@page apaisada { size: A4 landscape; margin: 8mm; }
@page vertical { size: A4 portrait; margin: 8mm; }
@media print {
  .aula-imprimir-hojas { gap: 0; }
  .aula-imprimir-hoja { border: 0; padding: 0; break-after: page; page-break-after: always; }
  .aula-imprimir-hoja:last-child { break-after: auto; page-break-after: auto; }
  .aula-imprimir-hoja.apaisada { page: apaisada; }
  .aula-imprimir-hoja.vertical { page: vertical; }
  .aula-imprimir-hoja img { max-height: 98vh; object-fit: contain; }
}

/* Biblioteca (26-09-2026): lo de edootek.com fuera de las lecciones, con poco peso. La franja del final de la
   home es discreta (borde fino, sin color de asignatura); dentro, la sección se ve como la página de un curso. */
.aula-bib-franja { display: flex; align-items: center; gap: 20px; margin-top: 48px; padding: 24px 28px; border: 1px solid var(--gm-gray-200); box-shadow: none; text-decoration: none; color: var(--gm-texto); }
.aula-home > .aula-bib-franja { margin-top: 16px; } /* con el hueco de 32 de la home, quedan 48 */
.aula-bib-franja:focus-visible { outline: none; box-shadow: var(--gm-halo-foco); }
.aula-bib-franja-icono { flex: none; font-size: 32px; color: var(--gm-primary-dark); }
.aula-bib-franja-texto { display: grid; gap: 4px; min-width: 0; }
.aula-bib-franja-texto b { font-size: 17px; font-weight: 800; }
.aula-bib-franja-texto small { font-size: 14px; font-weight: 600; color: var(--gm-texto-suave); }
.aula-bib-franja-flecha { flex: none; margin-left: auto; font-size: 24px; color: var(--gm-texto-suave); }

.aula-bib { max-width: 1100px; display: grid; gap: 32px; }
.aula-bib > .gm-page-title { margin: 0; }
.aula-bib-secciones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.aula-bib-seccion { display: flex; flex-direction: column; gap: 12px; padding: 28px 24px 24px; text-decoration: none; color: var(--gm-texto); }
.aula-bib-seccion:focus-visible { outline: none; box-shadow: var(--gm-halo-foco); }
.aula-bib-seccion-icono { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 4px; border-radius: 50%; background: var(--gm-primary-subtle); color: var(--gm-primary-dark); }
.aula-bib-seccion-icono .material-symbols-outlined { font-size: 30px; }
.aula-bib-seccion-nombre { font-size: 18px; font-weight: 800; line-height: 1.3; }
.aula-bib-seccion-texto { font-size: 14px; line-height: 1.5; color: var(--gm-texto-2); }
.aula-bib-seccion-n { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--gm-gray-200); font-size: 13px; font-weight: 700; color: var(--gm-texto-suave); }
@media (max-width: 1024px) { .aula-bib-secciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .aula-bib-secciones { grid-template-columns: 1fr; } }

/* Página de una sección: la de curso (.aula-curso) en el turquesa del aula, sin color de asignatura. */
.aula-bib-pagina { --ac: var(--gm-primary-dark); }
.aula-bib-miga { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; opacity: .9; }
.aula-bib-miga:hover { opacity: 1; text-decoration: underline; }
.aula-bib-miga:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.aula-bib-miga .material-symbols-outlined { font-size: 18px; }
.aula-bib-pagina > .gm-aviso { margin: 0; }
.aula-bib-grupo-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.aula-bib-grupo-acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.aula-bib-piezas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.aula-bib-piezas-sin-imagen { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.aula-bib-pieza { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.aula-bib-pieza-enlace { flex: 1; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 18px; text-decoration: none; color: var(--gm-texto); border-radius: inherit; }
.aula-bib-pieza-enlace:focus-visible { outline: none; box-shadow: inset var(--gm-halo-foco); }
.aula-bib-pieza-imagen { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--gm-radius-md); background: var(--gm-gray-50); color: var(--gm-gray-400); }
.aula-bib-pieza-imagen img { display: block; width: 100%; height: 100%; object-fit: contain; }
.aula-bib-pieza-imagen .material-symbols-outlined { font-size: 44px; }
.aula-bib-pieza-texto { display: grid; gap: 4px; }
.aula-bib-pieza-titulo { font-size: 15px; font-weight: 800; line-height: 1.3; }
.aula-bib-pieza-detalle { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--gm-texto-suave); }
.aula-bib-pieza-asignar { position: absolute; top: 24px; right: 24px; background: #fff; box-shadow: var(--gm-shadow-sm); }
.aula-bib-piezas-sin-imagen .aula-bib-pieza-enlace { flex-direction: row; align-items: center; gap: 14px; padding: 18px 64px 18px 20px; }
.aula-bib-piezas-sin-imagen .aula-bib-pieza-asignar { top: 50%; right: 12px; transform: translateY(-50%); box-shadow: none; }
.aula-bib-pieza-icono { flex: none; font-size: 28px; color: var(--gm-primary-dark); }
@media (max-width: 1024px) { .aula-bib-piezas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .aula-bib-piezas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .aula-bib-piezas { grid-template-columns: 1fr; } }

/* Visor de un grupo: el de las lecciones, con un solo apartado (el grupo) a todo el ancho y sus piezas en
   columnas; en el panel «Contenido», estrecho, vuelven a una columna. La pieza lleva debajo su detalle en pequeño. */
.aula-bib-visor .aula-apartados { grid-template-columns: minmax(0, 1fr); }
.aula-bib-visor .aula-recursos-menu { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 4px 24px; }
.aula-bib-recurso-detalle { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--gm-texto-suave); }
.aula-leccion-tarjeta .gm-pildora .material-symbols-outlined { font-size: 16px; vertical-align: -3px; }

/* Cuento pintado por el aula, dentro del iframe del visor (sin cabecera). */
body.aula-bib-lector { background: #fff; }
.aula-bib-lectura { max-width: 760px; margin: 0 auto; padding: 40px 32px 64px; }
.aula-bib-lectura-cab { margin-bottom: 32px; }
.aula-bib-lectura-titulo { margin: 0; font-size: 32px; font-weight: 800; line-height: 1.2; color: var(--gm-texto); }
.aula-bib-lectura-sub { margin: 10px 0 0; font-size: 15px; font-weight: 600; color: var(--gm-texto-suave); }
.aula-bib-audio { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; padding: 16px 20px; border-radius: var(--gm-radius-lg); background: var(--gm-primary-subtle); color: var(--gm-primary-dark); }
.aula-bib-audio .material-symbols-outlined { font-size: 26px; }
.aula-bib-audio-texto { font-size: 15px; font-weight: 800; }
.aula-bib-audio audio { flex: 1; min-width: 240px; }
.aula-bib-valores { margin: 0 0 32px; }
.aula-bib-texto { font-size: 19px; line-height: 1.75; color: var(--gm-texto); }
.aula-bib-texto p { margin: 0 0 1.1em; }
.aula-bib-texto h2, .aula-bib-texto h3 { margin: 0 0 24px; font-size: 18px; font-weight: 700; line-height: 1.4; text-align: center; color: var(--gm-texto-2); }
.aula-bib-texto img { display: block; max-width: 100%; height: auto; margin: 0 auto 32px; border-radius: var(--gm-radius-lg); }
/* Al pie del cuento: su registro en Safe Creative (en edootek.com era un widget; aquí, una línea discreta). */
.aula-bib-registro { display: flex; align-items: flex-start; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--gm-gray-200); font-size: 14px; line-height: 1.5; color: var(--gm-texto-suave); }
.aula-bib-registro > .material-symbols-outlined { flex: none; font-size: 22px; color: var(--gm-gray-400); }
.aula-bib-registro > div { display: grid; gap: 2px; }
.aula-bib-registro b { font-weight: 700; color: var(--gm-texto-2); }
.aula-bib-registro a { display: inline-flex; align-items: center; gap: 4px; color: var(--gm-primary-dark); font-weight: 600; text-decoration: none; }
.aula-bib-registro a:hover { text-decoration: underline; }
.aula-bib-registro a .material-symbols-outlined { font-size: 16px; }
@media (max-width: 600px) { .aula-bib-lectura { padding: 24px 16px 48px; } .aula-bib-lectura-titulo { font-size: 26px; } .aula-bib-texto { font-size: 17px; } }

/* Panel de control (29-09-2026): Configuración abre una ventana centrada con los accesos en tarjetas, como gemind.app.
   Sustituye al desplegable .aula-config (sus reglas de arriba quedan sin uso). */
.aula-config-boton { background: none; border: 0; padding: 0; color: #fff; display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--gm-font-family); cursor: pointer; }
.aula-config-boton:hover { opacity: .85; }
.aula-config-boton:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.6); border-radius: var(--gm-radius-md); }
.aula-panel-control .gm-modal-cuerpo { padding: 32px; }
.aula-panel-quien { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.aula-panel-quien b { display: block; font-size: 18px; font-weight: 800; color: var(--gm-texto); }
.aula-panel-quien small { display: block; margin-top: 2px; font-size: 13px; color: var(--gm-texto-suave); }
.aula-panel-quien .gm-pildora { margin-left: auto; }
.aula-panel-avatar { font-size: 48px; color: var(--gm-primary-dark); }
.aula-panel-nota { margin: 16px 0 0; font-size: 14px; color: var(--gm-texto-2); }
.aula-panel-grupo { margin: 32px 0 16px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gm-contraste); }
.aula-panel-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } /* tres por fila (Mikel, 30-09-2026) */
/* border-box: con width 100% el relleno y el borde se sumaban y las tarjetas-enlace (234 px) se salían de su columna (208),
   se montaban sobre el hueco y la fila quedaba descentrada (30-09-2026, medido con Chrome). El botón «Salir» ya era border-box. */
.aula-panel-tiles .gm-tile { box-sizing: border-box; padding: 24px 12px; font: 700 15px/1.3 var(--gm-font-family); color: var(--gm-texto); background: var(--gm-superficie); cursor: pointer; width: 100%; }
.aula-panel-tiles .gm-tile:focus-visible { outline: none; box-shadow: var(--gm-halo-foco); }
.aula-panel-tiles .aula-panel-salir .material-symbols-outlined { color: var(--gm-error); }
@media (max-width: 720px) { .aula-panel-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aula-panel-control .gm-modal-cuerpo { padding: 24px; } }

/* Movimiento al pasar el ratón, como gemind.app (Mikel, 30-09-2026): las tarjetas pulsables suben 2 px con sombra y los botones 1 px.
   Solo lo que se pulsa (enlaces y botones), y nada si el equipo pide menos movimiento. */
.gm-btn { transition: background var(--gm-transition), color var(--gm-transition), border-color var(--gm-transition), box-shadow var(--gm-transition), transform var(--gm-transition); }
.gm-btn:not(:disabled):hover { transform: translateY(-1px); }
.gm-card-hover, a.gm-tile, button.gm-tile { transition: box-shadow var(--gm-transition), border-color var(--gm-transition), transform var(--gm-transition); }
.gm-card-hover:hover, a.gm-tile:hover, button.gm-tile:hover { transform: translateY(-2px); box-shadow: var(--gm-shadow-md); }
.gm-btn:active, .gm-card-hover:active, a.gm-tile:active, button.gm-tile:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .gm-btn, .gm-card-hover, a.gm-tile, button.gm-tile { transition: none; }
  .gm-btn:hover, .gm-card-hover:hover, a.gm-tile:hover, button.gm-tile:hover { transform: none; }
}

/* ═════════ Móvil — base común (30-09-2026, proyecto /opt/mobile, etapa 1) ═════════
   Va aquí y no en gm-tokens-componentes.css, que es copia del patrón de gemind.app y se perdería al volver a
   copiarlo. Rellenos: se bajan los de 32–40 a 24, nunca menos (REGLA 6). Estudio: /opt/mobile/docs-ia. */

/* Ventanas (dialog): lo que no cabe se desplaza dentro, con la cabecera y el pie siempre a la vista. Antes
   `.gm-modal{overflow:hidden}` cortaba sin remedio (el botón «Guardar alumno» no se alcanzaba en un móvil). */
dialog.gm-modal { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
dialog.gm-modal .gm-modal-cab { position: sticky; top: 0; z-index: 2; background: var(--gm-superficie); }
dialog.gm-modal .gm-modal-pie { position: sticky; bottom: 0; z-index: 2; background: var(--gm-superficie); }

@media (max-width: 600px) {
  /* Cabecera: solo iconos de 44 × 44 y sin nombres, para que no ensanche la página (medía 522 px en un iPhone de 390).
     Los textos se ocultan con font-size 0: siguen ahí para los lectores de pantalla. */
  .aula-cabecera { gap: 8px; }
  .aula-cabecera .aula-izquierda { gap: 4px; }
  .aula-cabecera-sep { display: none; }
  .aula-cabecera:has(.aula-quien) .aula-marca { font-size: 0; gap: 0; }
  .aula-cabecera .aula-marca .material-symbols-outlined { font-size: 28px; }
  .aula-cabecera .aula-cabecera-nav, .aula-cabecera .aula-acciones > a, .aula-config-boton, .aula-salir-alumno button { min-width: 44px; min-height: 44px; justify-content: center; }
  .aula-acciones { gap: 4px; align-items: center; }
  .aula-quien > span:not(.aula-avatar) { display: none; } /* la cuenta: basta el círculo con sus iniciales */
  .modo-perfil .aula-quien > span:not(.aula-avatar) { display: block; min-width: 0; } /* el alumno sí ve su nombre */
  .modo-perfil .aula-quien small { display: none; }
  .modo-perfil .aula-quien b { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .aula-cab-suscribirse { font-size: 0; gap: 0; padding: 0; width: 44px; min-height: 44px; }
  .aula-cab-suscribirse .material-symbols-outlined { font-size: 20px; }

  /* Títulos de página: el subtítulo baja a su línea y la letra se ajusta. */
  .gm-page-title { flex-wrap: wrap; row-gap: 4px; font-size: 22px; }
  .gm-page-title small { flex-basis: 100%; font-size: 16px; }

  /* Filas de botones que se parten en líneas en vez de salirse. */
  .aula-botones, .gm-modal-pie { flex-wrap: wrap; }
  .gm-btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.2; }

  /* Rellenos de 32–40 a 24. */
  .gm-panel-cab { padding: 24px 24px 0; }
  .gm-panel-cuerpo { padding: 24px; }
  .gm-panel-cab + .gm-tabs, .gm-panel .gm-tabs { padding: 0 24px; }
  .aula-tarjeta-entrada { padding: 24px; }
  .aula-guia { padding: 24px; }
  .aula-guia-pasos li { padding-left: 44px; }
}

/* Pantallas táctiles (móvil y tablet): campos a 16 px para que iOS no haga zoom al tocarlos, y zonas de 44 px. */
@media (pointer: coarse) {
  .gm-input, .gm-select, .gm-textarea, .aula-editor-pieza-titulo, .aula-categoria-fila .gm-input { font-size: 16px; }
  .gm-btn-sm { min-height: 44px; }
  .aula-desplegable > summary { min-height: 44px; }
  .aula-ver { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .aula-periodos .gm-pildora, .aula-filtro-grupos .gm-pildora { min-height: 40px; display: inline-flex; align-items: center; padding-left: 14px; padding-right: 14px; }
}

/* Sin ratón, el «movimiento al pasar el ratón» se quedaba pegado después de tocar. */
@media (hover: none) {
  .gm-btn:not(:disabled):hover, .gm-card-hover:hover, a.gm-tile:hover, button.gm-tile:hover { transform: none; }
}

/* ═════════ Móvil — etapa 2: el alumno y el visor (30-09-2026, /opt/mobile) ═════════ */

/* Home del alumno: las tarjetas caben también a 360 px (minmax(260px) sin tope se salía de un panel estrecho). */
.aula-lecciones-perfil { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }

/* Aviso «Este juego se ve mejor en tablet u ordenador»: lo pinta visor.js en lugar de un juego de jugarysaber
   cuando la pantalla es un teléfono (decisión D1). Una acción principal: «Siguiente recurso». */
.aula-aviso-dispositivo { display: grid; justify-items: center; align-content: center; gap: 16px; text-align: center; min-height: 320px; padding: 32px 24px; background: var(--gm-superficie); border: 1px solid var(--gm-gray-200); border-radius: var(--gm-radius-lg); box-shadow: var(--gm-shadow-sm); }
.aula-aviso-icono { display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 50%; background: var(--gm-primary-subtle); color: var(--gm-primary-dark); font-size: 44px; }
.aula-aviso-dispositivo h3 { margin: 0; max-width: 28ch; font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--gm-texto); }
.aula-aviso-dispositivo p { margin: 0; max-width: 36ch; font-size: 16px; color: var(--gm-texto-2); }
.aula-aviso-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 16px; }

/* Visor «inmersivo» en un teléfono (táctil y estrecho, o táctil y bajo = apaisado): el recurso ocupa toda la pantalla
   bajo una barra de una fila con iconos (Índice, título, Contenido, anterior, siguiente). Sin el mínimo de 480 px del
   marco, que en apaisado lo hacía más alto que la pantalla. En ordenador y tablet no cambia nada.
   El recurso va de borde a borde a propósito: en un teléfono cada píxel cuenta (su contenido ya trae su relleno). */
@media (pointer: coarse) and (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  body.aula-enfoque .aula-visor-pagina.modo-recurso { padding: 0; }
  .aula-visor:fullscreen { padding: 0; }
  .aula-visor:-webkit-full-screen { padding: 0; }
  .modo-recurso .aula-visor-escenario { display: flex; flex-direction: column; gap: 0; height: 100vh; height: 100dvh; }
  .modo-recurso .aula-barra { position: static; flex-wrap: nowrap; gap: 4px; padding: 6px 8px; border-width: 0 0 1px; border-radius: 0; box-shadow: none; }
  .modo-recurso .aula-barra-texto { flex: 1; min-width: 0; padding: 0 4px; }
  .modo-recurso .aula-barra-titulo { font-size: 15px; }
  .modo-recurso .aula-barra-sub { display: none; }
  .modo-recurso .aula-barra-botones { flex-wrap: nowrap; gap: 4px; }
  .modo-recurso .aula-barra .gm-btn { width: 44px; min-height: 44px; padding: 0; gap: 0; font-size: 0; }
  .modo-recurso .aula-barra .gm-btn .material-symbols-outlined { font-size: 24px; }
  .modo-recurso .aula-barra .gm-btn:not(#aula-siguiente) { background: transparent; border-color: transparent; color: var(--gm-primary-dark); }
  .modo-recurso .aula-barra .gm-btn:disabled { opacity: .35; }
  .modo-recurso #aula-abrir-pestana { display: none !important; } /* fuera del aula el cargador no escala: se vería peor */
  .aula-visor-pagina.modo-recurso #aula-marco { flex: 1 1 auto; height: auto; min-height: 0; border-radius: 0; box-shadow: none; }
  .aula-visor-pagina.modo-recurso #aula-video { flex: 1 1 auto; width: 100%; height: auto; min-height: 0; max-height: none; object-fit: contain; border-radius: 0; }
  .aula-visor-pagina.modo-recurso .aula-aviso-dispositivo { flex: 1 1 auto; min-height: 0; overflow-y: auto; border: 0; border-radius: 0; box-shadow: none; }
}

/* Videotutoriales (01-10-2026, /opt/video-tutoriales): ventana que abre el botón de la cabecera (includes/tutoriales.php del plugin) */
.aula-tutoriales .gm-modal-cuerpo { padding: 32px; }
.aula-tut-reproductor { margin: 0 0 32px; }
.aula-tut-reproductor video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--gm-radius-lg); }
.aula-tut-actual { margin: 12px 0 0; font-size: 16px; font-weight: 800; color: var(--gm-texto); }
.aula-tut-intro { margin: 0 0 32px; color: var(--gm-texto-suave); }
.aula-tut-seccion + .aula-tut-seccion { margin-top: 32px; }
.aula-tut-seccion-titulo { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gm-primary-dark); }
.aula-tut-lista { display: grid; gap: 12px; }
.aula-tut-item { display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px 20px; text-align: left; background: var(--gm-superficie); border: 1px solid var(--gm-gray-200); border-radius: var(--gm-radius-md); font: 700 15px/1.35 var(--gm-font-family); color: var(--gm-texto); cursor: pointer; }
.aula-tut-item .material-symbols-outlined { font-size: 28px; color: var(--gm-primary); flex: none; }
.aula-tut-item:hover { border-color: var(--gm-primary-light); background: var(--gm-primary-subtle); }
.aula-tut-item:focus-visible { outline: none; box-shadow: var(--gm-halo-foco); }
.aula-tut-item.activo { border-color: var(--gm-primary); background: var(--gm-primary-subtle); }
.aula-tut-nombre { flex: 1; min-width: 0; }
.aula-tut-duracion { flex: none; font-weight: 600; font-size: 14px; color: var(--gm-texto-suave); }
@media (max-width: 720px) { .aula-tutoriales .gm-modal-cuerpo { padding: 24px; } }