/* Pantallas de adulto con el aspecto de aula.edootek.com (Mikel, 06-10-2026). Encima de las hojas de allí, copiadas
   tal cual en aula/css/ (no se editan: si cambian allí, se vuelven a copiar). Aquí solo lo nuestro: la maqueta de las
   clases ap-* que siguen en las plantillas de la familia y de las páginas públicas, con los tokens --gm-*. Los botones,
   tarjetas, avisos, títulos y tablas llevan además su clase gm-* en la plantilla. Sin colores a mano. */

body.aula { display: flex; flex-direction: column; min-height: 100vh; }
body.aula > main { flex: 1; width: 100%; box-sizing: border-box; }
body.aula a { color: var(--gm-primary-dark); }
body.aula .aula-cabecera a, body.aula a.gm-btn, body.aula a.gm-tile, body.aula a.gm-card { color: inherit; }
body.aula a.gm-btn-primary { color: #fff; }
body.aula a.gm-btn-secondary, body.aula a.gm-btn-ghost { color: var(--gm-primary-dark); }
body.aula .aula-cabecera a { color: #fff; }
body.aula .aula-curso-cursos a { color: #fff; }
body.aula .aula-curso-cursos a.activo { color: var(--gm-gray-900); }
div.aula-curso { margin: 0 auto; } /* allí es el <main>; aquí va dentro del de adulto_base */
.aula-cabecera form { margin: 0; display: inline-flex; }
.ap-equipo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--gm-radius-pill); background: var(--gm-secondary); color: var(--gm-gray-900); font-size: 13px; font-weight: 700; }

/* La cabecera ya lleva «Inicio» y «Atrás», como allí: los «‹ Mi cuenta» de cada pantalla sobran. */
body.aula .ap-volver { display: none; }

/* bloques y textos */
body.aula .ap-bloque { margin: 0 0 32px; }
body.aula .ap-bloque:last-child { margin-bottom: 0; }
body.aula .ap-cabeza { margin-bottom: 28px; }
body.aula .ap-cabeza .gm-page-title { margin-bottom: 8px; }
body.aula .ap-cabeza > :last-child { margin-bottom: 0; }
body.aula .ap-subtitulo { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 16px; font-weight: 800; color: var(--gm-primary-dark); }
body.aula .ap-dato { margin: 0; font-size: 15px; color: var(--gm-texto-2); max-width: var(--gm-ancho-lectura); }
body.aula .ap-dato + .ap-dato { margin-top: 8px; }
body.aula .ap-bloque > .ap-dato, body.aula .ap-bloque > div, body.aula .ap-bloque > form, body.aula .ap-bloque > .ap-lista,
body.aula .ap-bloque > .ap-paneles, body.aula .ap-bloque > .gm-aviso, body.aula .ap-bloque > table { margin-top: 24px; }
body.aula .ap-bloque > :first-child { margin-top: 0; }

/* tarjetas (gm-card) en lista o rejilla */
body.aula .ap-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
body.aula .ap-paneles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
body.aula .ap-tarjeta { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; text-decoration: none; color: var(--gm-texto); }
body.aula .ap-tarjeta-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.aula .ap-tarjeta-texto strong { font-size: 18px; font-weight: 700; color: var(--gm-texto); }
body.aula .ap-tarjeta-tipo { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gm-texto-suave); }
body.aula .ap-tarjeta-estado { font-size: 14px; color: var(--gm-texto-suave); }
body.aula .ap-flecha { font-size: 28px; line-height: 1; color: var(--gm-primary-dark); }
body.aula .es-apagado { opacity: .6; }
body.aula .ap-fila, body.aula .ap-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
body.aula .ap-fila form, body.aula .ap-acciones form { margin: 0; }

/* formularios: las etiquetas envuelven el campo; el campo, como .gm-input */
body.aula .ap-formulario { display: grid; gap: 24px; max-width: 560px; }
body.aula .ap-formulario.ap-filtro { max-width: none; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; gap: 16px 24px; }
body.aula .ap-entrar { max-width: 640px; }
body.aula .ap-campo { display: grid; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; color: var(--gm-texto-2); }
body.aula .ap-campo input:not([type=checkbox]):not([type=radio]), body.aula .ap-campo select, body.aula .ap-campo textarea,
body.aula .ap-formulario > input:not([type=checkbox]):not([type=radio]):not([type=hidden]) {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 14px;
  border: 1.5px solid var(--gm-gray-300); border-radius: var(--gm-radius-md); background: #fff;
  font: 400 15px var(--gm-font-family); color: var(--gm-texto);
  transition: border-color var(--gm-transition), box-shadow var(--gm-transition);
}
body.aula .ap-campo textarea { min-height: 120px; padding: 12px 14px; resize: vertical; }
body.aula .ap-campo input:focus, body.aula .ap-campo select:focus, body.aula .ap-campo textarea:focus { outline: none; border-color: var(--gm-primary); box-shadow: var(--gm-halo-campo); }
body.aula .ap-casillas { display: grid; gap: 12px; border: 0; padding: 0; margin: 0; }
body.aula .ap-casillas legend { padding: 0; margin-bottom: 12px; font-size: 14px; font-weight: 600; color: var(--gm-texto-2); }
body.aula .ap-casilla { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--gm-texto-2); cursor: pointer; }
body.aula .ap-casilla input, body.aula .ap-campo input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--gm-primary-dark); }

/* cifras, barras y tablas */
body.aula .ap-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
body.aula .ap-cifra { display: flex; flex-direction: column; gap: 4px; padding: 20px 24px; background: var(--gm-superficie); border: 1px solid var(--gm-gray-200); border-radius: var(--gm-radius-lg); box-shadow: var(--gm-shadow-sm); }
body.aula .ap-cifra strong { font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--gm-texto); }
body.aula .ap-cifra span { font-size: 13px; color: var(--gm-texto-suave); }
body.aula .ap-barra { display: inline-block; width: 96px; height: 8px; background: var(--gm-gray-200); border-radius: var(--gm-radius-pill); overflow: hidden; vertical-align: middle; }
body.aula .ap-barra span { display: block; height: 100%; background: var(--gm-success); }
body.aula .gm-tabla { display: block; overflow-x: auto; background: var(--gm-superficie); border: 1px solid var(--gm-gray-200); border-radius: var(--gm-radius-lg); }
body.aula .aula-tabla-envuelta > .gm-tabla { display: table; border: 0; border-radius: 0; } /* dentro de su tarjeta, como en aula.edootek.com: a todo el ancho */
body.aula .ap-clave { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 22px; font-weight: 700; letter-spacing: .04em; }

/* vídeo de la muestra y de la lección vista como adulto */
body.aula .ap-video { border-radius: var(--gm-radius-lg); overflow: hidden; background: #000; }
body.aula .ap-video video { display: block; width: 100%; height: auto; max-height: 70vh; }
body.aula .ap-tarjeta-paso { flex-wrap: wrap; }
body.aula .ap-ver[open] { flex-basis: 100%; }
body.aula .ap-ver .ap-video { width: 100%; margin-top: 16px; }
body.aula .ap-ver summary { list-style: none; cursor: pointer; }
body.aula .ap-ver summary::-webkit-details-marker { display: none; }

/* preguntas frecuentes y textos legales */
body.aula .ap-pregunta { border-bottom: 1px solid var(--gm-gray-200); padding: 16px 0; }
body.aula .ap-pregunta summary { cursor: pointer; font-weight: 700; }
body.aula .ap-pregunta p { margin: 16px 0 0; }

/* la portada de la cuenta, como la de aula.edootek.com */
.aula-home .aula-seccion { margin-bottom: 24px; }
.aula-home .aula-areas { margin-top: 16px; }
.aula-tile-pildora { margin-top: 4px; }
.aula-home .aula-tiles-seis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { .aula-home .aula-tiles-seis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .aula-home .aula-tiles-seis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* la entrada (aula-acceder): el pie con los enlaces de las páginas públicas */
.aula-acceder-mas { margin: 32px 0 0; padding-top: 24px; border-top: 1px solid var(--gm-gray-200); text-align: center; font-size: 14px; color: var(--gm-texto-suave); }
.aula-acceder-mas a { margin: 0 8px; font-weight: 700; text-decoration: none; }

/* las páginas públicas: menú en la cabecera */
.aula-cabecera .ap-menu-publico { display: flex; align-items: center; gap: 24px; }

@media print {
  .ap-no-imprimir, .aula-cabecera, .aula-pie { display: none !important; }
  body.aula { background: #fff; }
  .aula-contenido { padding: 0; max-width: none; }
}

/* avisos: los ap-aviso de las plantillas, como .gm-aviso (su color va por es-bien / es-mal / es-pista, a veces condicional) */
body.aula .ap-aviso { display: block; margin: 0; padding: 16px 20px; border-radius: var(--gm-radius-md); border-left: 4px solid var(--gm-info); background: var(--gm-info-subtle); color: var(--gm-info-text); font-size: 15px; line-height: 1.5; max-width: var(--gm-ancho-lectura); }
body.aula .ap-aviso.es-bien { background: var(--gm-success-subtle); border-color: var(--gm-success); color: var(--gm-success-text); }
body.aula .ap-aviso.es-mal { background: var(--gm-error-subtle); border-color: var(--gm-error); color: var(--gm-error-text); }
body.aula .ap-aviso.es-pista { background: var(--gm-warning-subtle); border-color: var(--gm-warning); color: var(--gm-warning-text); }
body.aula .ap-aviso a { color: inherit; font-weight: 700; }
.ap-acceder-main { max-width: none; padding: 0; }
.aula-acceder-legal { margin: 16px 0 0; text-align: center; font-size: 13px; color: var(--gm-texto-suave); }
.aula-acceder-legal a { color: var(--gm-texto-2); text-decoration: none; }
.aula-portadas .gm-nivel-cab { --ac: inherit; } /* el color lo pone la asignatura, como en .aula-area */

/* «Mis alumnos» (familia_hijos.html), lo que no trae aula.css: los interruptores de programas, solo dibujados (Mikel,
   07-10-2026), se ven como los de allí aunque no se puedan tocar; el desactivado sin «Reactivar»; borrar; y la clave,
   que se imprime sola, sin la pantalla de detrás. */
.aula-alumnos-pagina [hidden] { display: none !important; } /* las .gm-card y .gm-aviso ponen display y taparían el atributo */
.aula-alumno-interruptores .gm-switch { cursor: default; }
.aula-alumno-interruptores .gm-switch input:disabled { opacity: 1; }
.aula-alumno-reactivar { margin: 0 0 4px; max-width: 200px; }
.aula-modal-borrar .gm-aviso, .aula-modal-error { margin-bottom: 28px; }
.aula-modal-borrar .gm-campo { margin-bottom: 0; }
@media print {
  body.aula:has(#modal-clave[open]) > :not(#modal-clave) { display: none !important; }
  #modal-clave { position: static; box-shadow: none; border: 0; max-width: none; }
  #modal-clave::backdrop { display: none; }
  #modal-clave .gm-modal-pie, #modal-clave [data-cerrar] { display: none !important; }
}

/* El reproductor de la lección (familia_leccion.html, visor.js): lo que sale en lugar de un recurso que aún no se
   abre (el juego), y la hoja o la ficha dentro de su marco (familia_hoja.html). 07-10-2026. */
.ap-recurso-pronto { min-height: 420px; display: grid; place-items: center; }
body.ap-hoja { margin: 0; height: 100vh; display: flex; flex-direction: column; background: var(--gm-bg, #f7f2f4); font-family: var(--gm-font, "Nunito", system-ui, sans-serif); }
.ap-hoja-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 16px 24px; background: #fff; border-bottom: 1px solid var(--gm-border, #e5e7eb); }
.ap-hoja-texto { display: flex; flex-direction: column; gap: 4px; }
.ap-hoja-texto span { color: var(--gm-text-muted, #6b7280); font-size: 14px; }
.ap-hoja-botones, .ap-hoja-pedir { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.ap-hoja-pedir .gm-label { margin: 0; }
.ap-hoja-pedir .gm-select { width: auto; min-width: 160px; }
.ap-hoja-pdf { flex: 1; width: 100%; border: 0; background: #fff; }
.ap-visor-cabecera { grid-column: 1 / -1; margin: 16px 0 0; font-size: 18px; font-weight: 800; color: var(--gm-gray-900); }
.ap-visor-cabecera:first-child { margin-top: 0; }
.ap-visor-cabecera small { margin-left: 8px; font-size: 14px; font-weight: 600; color: var(--gm-gray-500); }
.ap-visor-de { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--gm-gray-500); }
.aula-editor [hidden] { display: none !important; } /* los .gm-aviso y el árbol ponen display y taparían el atributo */

/* El informe del profesor particular (B3, POR-004; mapa, 5 bis): su nombre grande arriba, sus comentarios y, al pie,
   «Hecho con Aula Primaria» en pequeño, sin oferta, enlace ni precio. */
.ap-informe-firma { margin: 0 0 32px; font-size: 36px; font-weight: 800; line-height: 1.15; color: var(--gm-texto, inherit); }
.ap-informe-firma .ap-no-imprimir { font-size: 15px; font-weight: 400; color: var(--gm-texto-suave); }
.ap-informe-comentarios { margin: 0; font-size: 16px; line-height: 1.6; max-width: var(--gm-ancho-lectura); white-space: normal; }
.ap-informe-hecho { margin: 48px 0 0; font-size: 12px; color: var(--gm-texto-suave); }
.ap-filtro textarea { width: 100%; max-width: var(--gm-ancho-lectura); font: inherit; }
/* C5 (POR-012): una casilla del escritorio que aún no lleva a ningún sitio (las tareas, con D1). */
.aula-tile-pronto { opacity: .6; cursor: default; }

/* La portada de tres puertas (F1, 21-10-2026): la del maestro, a lo ancho y la primera; las otras dos, debajo.
   Cada puerta es un enlace entero; el botón de dentro solo lo señala. */
body.aula .ap-puertas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
body.aula a.ap-puerta { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px; text-decoration: none; color: var(--gm-texto); border: 1.5px solid var(--ap-borde-control); transition: background var(--gm-transition), border-color var(--gm-transition); }
body.aula a.ap-puerta:hover { background: var(--ap-hover); border-color: var(--gm-primary-dark); }
body.aula a.ap-puerta:focus-visible { outline: none; box-shadow: var(--gm-halo-foco); }
body.aula .ap-puerta-icono { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--gm-primary-subtle); color: var(--gm-primary-dark); font-size: 30px; }
body.aula .ap-puerta-texto { display: flex; flex-direction: column; gap: 8px; }
body.aula .ap-puerta-texto strong { font-size: 22px; font-weight: 800; color: var(--gm-primary-dark); }
body.aula .ap-puerta-texto span { font-size: 15px; color: var(--gm-texto-2); max-width: var(--gm-ancho-lectura); }
body.aula .ap-puerta-boton { margin-top: auto; pointer-events: none; }
body.aula a.ap-puerta-grande { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px 32px; padding: 32px; border-width: 2px; border-color: var(--gm-primary-dark); }
body.aula .ap-puerta-grande .ap-puerta-icono { width: 72px; height: 72px; font-size: 38px; background: var(--gm-secondary-subtle); }
body.aula .ap-puerta-grande .ap-puerta-texto strong { font-size: 28px; }
body.aula .ap-puerta-grande .ap-puerta-boton { margin-top: 0; }
body.aula .ap-bloque > .ap-puertas-entrar { margin-top: 32px; }
@media (max-width: 720px) {
  body.aula .ap-puertas { grid-template-columns: 1fr; }
  body.aula a.ap-puerta-grande { grid-template-columns: 1fr; justify-items: start; }
}
body.aula a.aula-acceder-logo { text-decoration: none; }

/* Los precios por perfil (F5, 21-10-2026): el lema grande, las cajas de cada precio (la del curso, destacada), la tabla
   de tramos con el de hoy marcado. En «Mi acceso», cada licencia del profesor en su tarjeta. */
body.aula .ap-precios-lema { margin: 0 0 12px; font-size: var(--gm-t-lg); font-weight: 800; color: var(--gm-primary-dark); }
body.aula .ap-precio-gratis { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px 32px; padding: 32px; border: 2px solid var(--gm-primary-dark); }
body.aula .ap-precio-gratis .ap-puerta-icono { width: 72px; height: 72px; font-size: 38px; background: var(--gm-secondary-subtle); }
body.aula .ap-precio-cajas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
body.aula .ap-precio-caja { display: flex; flex-direction: column; gap: 8px; padding: 28px; border: 1.5px solid var(--ap-borde-control); }
body.aula .gm-card.ap-precio-caja-destacada { border: 2px solid var(--gm-primary-dark); background: var(--gm-primary-subtle); }
body.aula .ap-precio-importe { font-size: var(--gm-t-xxl); font-weight: 800; line-height: 1.1; color: var(--gm-primary-dark); }
body.aula .ap-precio-importe small { font-size: var(--gm-t-base); font-weight: 600; color: var(--gm-texto-2); }
body.aula .ap-precio-segundo { font-size: var(--gm-t-md); font-weight: 700; color: var(--gm-texto); }
body.aula .ap-precio-titulo-tabla { margin: 0 0 16px; font-size: var(--gm-t-base); font-weight: 700; color: var(--gm-texto); }
body.aula .gm-tabla.ap-precio-tabla { display: table; width: 100%; max-width: 560px; } /* pocas columnas: cabe sin desplazar */
body.aula .ap-precio-tabla tr.es-hoy td { font-weight: 700; color: var(--gm-texto); background: var(--gm-primary-subtle); }
body.aula .ap-precio-nota { margin-top: 16px; }
body.aula .aula-licencia { display: grid; gap: 8px; padding: 24px; }
body.aula .aula-licencia .ap-acciones { margin-top: 16px; }
body.aula .aula-licencia + .aula-licencia { margin-top: 16px; }
body.aula .aula-licencia-subir { border: 2px solid var(--gm-primary-dark); }
@media (max-width: 720px) {
  body.aula .ap-precio-gratis { grid-template-columns: 1fr; justify-items: start; padding: 24px; }
}
/* F5: el precio de cada puerta en «Precios», y la vuelta a «Todos los precios» (la cabecera pública no tiene «Atrás»). */
body.aula .ap-puerta-texto .ap-puerta-precio { font-size: var(--gm-t-md); font-weight: 800; color: var(--gm-texto); }
body.aula .ap-volver.ap-volver-publico { display: inline-block; margin-bottom: 24px; font-weight: 600; }