/* El aspecto propio de las pantallas de adulto: «Pizarra y sol» con más contraste, cabecera de color y Nunito
   (Mikel, 08-10-2026, elegido en /pruebas/diseno/ entre tres propuestas; allí es la «A2»).
   La disposición sigue siendo la de gemind.app y aula.edootek.com: sus hojas (aula/css/) no se tocan; esta va encima
   de ellas y de adulto.css, y solo cambia los tokens --gm-* y unas pocas reglas de forma.
   Reglas: lo que se pulsa lleva un borde de al menos 3 a 1 (WCAG 2.2, 1.4.11) y un hover que cambia el relleno; lo
   que no se pulsa se separa con el fondo y una sombra suave. El amarillo, solo de acento: sobre blanco da 1,6 a 1 y no
   vale de señal. Medidas: #7b88a0 da 3,6 sobre blanco y 3,1 sobre el azul claro del hover. */

:root {
  /* Azul pizarra (el texto de 5.º y 6.º de la hoja de estilos) y amarillo sol (el botón de 1.º y 2.º) */
  --gm-primary: #33507f; --gm-primary-dark: #24406b; --gm-primary-light: #7d95bf; --gm-primary-subtle: #e9eef7;
  --gm-contraste: #24406b;
  --gm-secondary: #ffc233; --gm-secondary-dark: #e09a00; --gm-secondary-light: #ffd36b; --gm-secondary-subtle: #fff4d1;
  --gm-fondo-pagina: #e9edf4; --gm-fondo-pie: #e7ecf4;
  --gm-gray-200: #aeb9cc;           /* líneas y bordes de bloque, más oscuras que en gemind (Mikel, 08-10) */
  --gm-info: #24406b; --gm-info-subtle: #e9eef7; --gm-info-text: #1b2f50;
  --gm-halo-foco: 0 0 0 3px rgba(51,80,127,.35); --gm-halo-campo: 0 0 0 3px rgba(51,80,127,.2);
  --ap-borde-control: #7b88a0;      /* borde de lo que se pulsa: 3,6 a 1 sobre blanco */
  --ap-hover: #dfe7f3;              /* fondo al pasar por encima */
  --ap-sombra-bloque: 0 1px 2px rgba(29,42,68,.06), 0 2px 8px -2px rgba(29,42,68,.10);
}

/* La cabecera, de color, con la línea del sol debajo; sus enlaces con hover visible */
body.aula .aula-cabecera { box-shadow: inset 0 -4px 0 var(--gm-secondary); }
body.aula .aula-cabecera > div > a, body.aula .aula-cabecera .aula-acciones a { border-radius: var(--gm-radius-md); padding: 6px 8px; transition: background var(--gm-transition); }
body.aula .aula-cabecera > div > a:hover, body.aula .aula-cabecera .aula-acciones a:hover { background: rgba(255,255,255,.14); }

/* Bloques: sin los bordes gruesos grises de gemind; se recortan con el fondo y una sombra suave */
body.aula .gm-card { box-shadow: var(--ap-sombra-bloque); }
body.aula .aula-seccion { border: 1px solid var(--gm-gray-200); border-radius: var(--gm-radius-xl); box-shadow: var(--ap-sombra-bloque); }
body.aula .aula-area { border: 1px solid var(--gm-gray-200); border-left: 6px solid var(--ac); border-radius: var(--gm-radius-xl); box-shadow: var(--ap-sombra-bloque); }
body.aula .aula-seccion-cuerpo, body.aula .aula-area-cuerpo { border-top-color: transparent; }
body.aula .aula-seccion > summary { color: var(--gm-texto); }
body.aula .aula-seccion > summary .material-symbols-outlined { color: var(--gm-secondary-dark); }
body.aula .aula-seccion > summary:hover, body.aula .aula-area > summary:hover { background: var(--ap-hover); }
body.aula .aula-programa { border: 1.5px dashed #a3adbf; box-shadow: none; }

/* Tarjetas de acción (panel de trabajo, panel de control): borde que se ve, icono en un círculo; al pasar, se rellenan */
body.aula .gm-tile .material-symbols-outlined { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--gm-primary-subtle); font-size: 32px; transition: background var(--gm-transition), color var(--gm-transition); }
body.aula .gm-tile:hover .material-symbols-outlined { background: var(--gm-primary-dark); color: #fff; }
body.aula .aula-home .gm-tile { border: 1.5px solid var(--ap-borde-control); box-shadow: none; padding: 28px 12px 24px; }
body.aula .gm-tile:hover { background: var(--gm-primary-subtle); border-color: var(--gm-primary-dark); box-shadow: var(--gm-shadow-md); }

/* Botones: los de borde, con un borde que se ve; al pasar, fondo claro */
body.aula .gm-btn-secondary { border: 1.5px solid var(--gm-primary-dark); }
body.aula .gm-btn-neutral, body.aula .gm-btn-danger { border: 1.5px solid var(--ap-borde-control); }
body.aula .gm-btn-neutral { color: var(--gm-primary-dark); }
body.aula .gm-btn-secondary:hover, body.aula .gm-btn-neutral:hover { background: var(--ap-hover); border-color: var(--gm-primary-dark); }

/* Pestañas: la elegida, rellena de azul oscuro; el hover, fondo claro con raya; la línea de abajo, muy clarita */
body.aula .gm-tabs { border-bottom: 1px solid #d5dce8; gap: 6px; }
body.aula .gm-tab { border-radius: var(--gm-radius-md) var(--gm-radius-md) 0 0; border-bottom: 4px solid transparent; margin-bottom: -1px; color: var(--gm-texto-2); }
body.aula .gm-tab:not(.activa):hover { background: var(--ap-hover); color: var(--gm-primary-dark); border-bottom-color: var(--ap-borde-control); }
body.aula .gm-tab.activa { background: var(--gm-primary-dark); color: #fff; border-bottom-color: var(--gm-primary-dark); font-weight: 800; }
body.aula .gm-tab.activa .material-symbols-outlined, body.aula .gm-tab.activa .gm-tab-contador { color: #fff; }
body.aula .gm-tab.activa .gm-tab-contador { background: rgba(255,255,255,.2); }

/* Desplegables y filas de tabla: hover que se ve */
body.aula .aula-desplegable > summary { border-radius: var(--gm-radius-md); padding: 6px 8px; margin: -6px -8px; transition: background var(--gm-transition); }
body.aula .aula-desplegable > summary:hover { background: var(--ap-hover); }
body.aula .gm-tabla tbody tr:hover td { background: #eef2f9; }

/* ── El amarillo sol, de verdad (Mikel, 08-10-2026: «parece que es en blanco y negro») ──
   60-30-10: fondo blanco y gris, estructura en azul, y el amarillo (un 10 %) solo en lo que se tiene que mirar primero.
   Siempre de relleno con el texto en azul oscuro (6,6 a 1); nunca texto amarillo sobre blanco (1,6 a 1) ni el foco. */
/* El botón principal de cada pantalla: uno solo, con la clase ap-destacado en la plantilla */
body.aula .gm-btn.ap-destacado, body.aula a.gm-btn.ap-destacado { background: var(--gm-secondary); border-color: var(--gm-secondary); color: #1b2f50; font-weight: 700; }
body.aula .gm-btn.ap-destacado:hover, body.aula a.gm-btn.ap-destacado:hover { background: var(--gm-secondary-dark); border-color: var(--gm-secondary-dark); color: #1b2f50; }
body.aula .gm-btn.ap-destacado .material-symbols-outlined { color: inherit; }
/* La pestaña elegida, con la raya del sol, como la cabecera */
body.aula .gm-tab.activa { border-bottom-color: var(--gm-secondary); }
/* Lo abierto o elegido: el desplegable abierto, con un filo de sol; el aro del avatar de la cabecera */
body.aula .aula-desplegable.gm-card[open] { border-left: 4px solid var(--gm-secondary); }
body.aula .aula-cabecera .aula-avatar { border-color: var(--gm-secondary); }
/* Las cifras de las tarjetas de curso, con el icono en sol oscuro */
body.aula .aula-portada-tipo-n .material-symbols-outlined { color: var(--gm-secondary-dark); }
/* El icono de «todavía no hay…», en el mismo círculo de sol claro que las tarjetas de acción */
body.aula .gm-vacio-icono { background: var(--gm-secondary-subtle); }