/* menu-en.css — lo que aporta el menú de Enseñanza, y NADA MÁS. * * ══ LO QUE NO ESTÁ AQUÍ, Y ES A PROPÓSITO ════════════════════════════ * La cabecera, el chip de áreas, el botón de tema, el pie y la caja de * licencia **no se escriben aquí**: los pone `nucleo/panel/armazon.js` y los * viste `armazon.css`. Tampoco el CARRUSEL de la lista de cursos, que desde el * 31 ago 2026 vive en el núcleo como `.loea-carrusel`. * * `ARMAZON-DEL-PANEL.md` §8.5 lo dice sin rodeos: si estás escribiendo una * cabecera o un pie dentro de la carpeta de un menú, párate — eso ya existe. * * De todo el carrusel, Enseñanza aporta **la barra de avance**. Eso fue lo que * se midió al decidirlo (`docs/maqueta-carrusel-de-cursos.html`): 2 reglas * propias en vez de las 22 que costaban unas tarjetas nuevas. * * ══ NI UN COLOR LITERAL ══════════════════════════════════════════════ * Todo sale de los tokens `--loea-*`. La única paleta literal del área es la * de la HOJA (`motor/paleta-hoja.js`), y es literal porque una celda de Excel * guarda un RGB — aquí no hay ninguna excusa de esas. */ /* ══════════════════════════════════════════════════════════════════════ 1 · LA BARRA DE AVANCE — lo único que el carrusel necesita de nosotros ══════════════════════════════════════════════════════════════════════ */ .en-barrita { display: block; height: 3px; border-radius: 3px; background: var(--loea-line); overflow: hidden; } .en-barrita i { display: block; height: 100%; border-radius: 3px; background: var(--loea-acc); } /* ══════════════════════════════════════════════════════════════════════ 2 · «CONTINUAR DONDE IBAS» — la primera tarjeta, que no es un curso ══════════════════════════════════════════════════════════════════════ Va arriba del todo porque es lo que el alumno viene a hacer nueve de cada diez veces (`DISENO.md` §2). No es una parada más de la lista: es la ruta entera resumida en un botón. */ /* ⚑ AQUÍ VIVÍA `.en-retomar`, la tarjeta «DÓNDE TE QUEDASTE». Se quitó el 2 sep 2026 al verla en Excel: repetía el nombre del curso, su avance y su barrita, que ya estaban tres centímetros más abajo en la tarjeta del propio curso, y para eso se quedaba con el tercio bueno del panel. El «qué sigue» del §2 no se perdió: lo dice ahora la tarjeta del curso —«Ejercicio: Cuántos pasaron la meta» y «Continuar →»—, que es un toque en vez de dos. El porqué largo está en `vista-inicio.js`. */ /* ══════════════════════════════════════════════════════════════════════ LA BANDEJA DE AVISOS (fase 11) ══════════════════════════════════════════════════════════════════════ Sale sólo cuando hay algo que atender —hoy, un examen con el reloj corriendo—. Esa es la regla que la separa de la tarjeta «Dónde te quedaste» que la fase 10 quitó por salir siempre; si algún día esto sale siempre, se volvió el héroe y hay que quitarlo. Va en LATÓN, no en rojo. Rojo diría «algo está mal» y no lo está: es algo que corre. El rojo se reserva para lo vencido, que sí es una pérdida. */ .en-bandeja { display: flex; flex-direction: column; gap: 9px; margin: 2px 0 4px; } .en-aviso-ficha { box-sizing: border-box; background: var(--loea-brass-soft); border: 1px solid var(--loea-brass-line); border-radius: 12px; padding: 12px 13px; } .en-aviso-ficha .cap { display: block; font: 600 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--loea-brass); } .en-aviso-txt { margin: 6px 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--loea-ink); } .en-aviso-ficha .en-btn { padding: 7px 12px; font-size: 12.5px; } /* Vencido: ahí sí, porque ya no es «corre», es «se perdió tiempo». */ .en-aviso-ficha.vencido { background: var(--loea-card); border-color: var(--loea-line); } .en-aviso-ficha.vencido .cap { color: var(--loea-mut); } /* El aviso dentro de la tarjeta del curso, donde iría «Continuar →». Va con `.ir` delante A PROPÓSITO: el armazón pinta `.loea-carrusel .card .ir` con el acento, y son tres clases. Con `.en-urge` a secas —una— esta regla era CSS muerto: se veía morada como cualquier otra acción y el latón no llegaba nunca. Se vio a 340 px el 2 sep 2026. */ .en-card .ir.en-urge { color: var(--loea-brass); font-weight: 600; white-space: nowrap; } .en-card .ir.en-urge.vencido { color: var(--loea-mut); } /* En el índice y el carrusel no hay `.ir`, así que basta la clase. */ .en-urge { color: var(--loea-brass); font-weight: 600; white-space: nowrap; } .en-urge.vencido { color: var(--loea-mut); } /* La fila del rótulo: «MIS CURSOS» a la izquierda y el selector de vista a la derecha. El selector es del armazón (`.sw`), que lo subió de `ax` el mismo día; aquí sólo se le hace sitio. */ .en-rot-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .en-rot-fila .en-rot { margin-bottom: 0; } /* Sin ningún curso. Un panel vacío tiene que decir POR QUÉ está vacío y qué hacer, o se lee como un fallo de carga. */ .en-vacio { margin: 16px 0 14px; font-size: 12.5px; line-height: 1.55; color: var(--loea-mut); } /* Desde el 10 sep 2026 el vacío puede ser una caja con varios renglones: son TRES vacíos distintos —no has comprado, el equipo no está activado, no se pudo preguntar— y cada uno dice lo suyo y ofrece su salida. El primer renglón es la frase que importa, y por eso pesa más que el resto. */ .en-vacio p { margin: 0 0 5px; } .en-vacio p:first-child { color: var(--loea-ink); font-weight: 600; } .en-vacio p:last-of-type { margin-bottom: 10px; } /* La rejilla de `.card` (armazón) es `40px 1fr`, con el icono ocupando dos filas: todo lo que va después del nombre y la descripción cae en la columna de 40 px si no se le dice lo contrario. El armazón ya lo resuelve para su `.meta`; esto es lo mismo para lo que pone Enseñanza. Sin ello, a 340 px «Archivo local · no cuenta como oficial» salía a una palabra por renglón y «Quitar» ocupaba media tarjeta (visto el 2 sep 2026). */ .en-card > .en-barrita { grid-column: 2; margin-top: 8px; } .en-card > .en-marca { grid-column: 2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* En el carrusel la tarjeta es una columna flex y no hace falta rejilla, pero sí que el distintivo y el botón vayan en fila y no uno debajo del otro. */ .en-marca { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* ══════════════════════════════════════════════════════════════════════ EL PIE DE LA PANTALLA 1 — y por qué lleva raya ══════════════════════════════════════════════════════════════════════ «Abrir un curso de un archivo…» y la liga a la academia eran dos cajas redondeadas, a todo lo ancho, pegadas a la última tarjeta: la misma silueta que un curso. Se leían como dos cursos más de la lista. Se vio en Excel el 2 sep 2026 —«se ve muy pegado y confunde con las tarjetas»—. Tres cosas lo arreglan, y las tres hacen falta: AIRE, una RAYA que diga dónde acaba la lista, y quitarles el ancho completo para que dejen de tener forma de tarjeta. */ .en-acciones { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--loea-line); display: flex; flex-direction: column; align-items: center; gap: 12px; } /* Ni a todo lo ancho ni con relleno de tarjeta: un botón que se ve botón. */ /* `box-sizing` explícito otra vez: la familia no tiene reset `*`, y un `max-width: 100%` con padding se sale tantos píxeles como padding tenga, igual que un `width: 100%`. Lo cazó `verificar-panel.mjs`. */ .en-acciones .en-btn.sec { box-sizing: border-box; width: auto; max-width: 100%; padding: 8px 16px; border-radius: 999px; font-size: 12.5px; } /* Y la liga, pelada: sin caja, sin borde y sin fondo. Es lo que más se parecía a una tarjeta. En las demás pantallas conserva su caja. */ .en-acciones .en-academia { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; } .en-acciones .en-academia:hover { text-decoration-thickness: 2px; } /* ══════════════════════════════════════════════════════════════════════ 3 · LOS BOTONES DEL ÁREA ══════════════════════════════════════════════════════════════════════ */ /* `box-sizing` explícito, como lo pone `armazon.css` regla por regla: la familia NO tiene un reset `*`, así que un `width: 100%` con padding se sale de su caja tantos píxeles como padding tenga. */ .en-btn { box-sizing: border-box; width: 100%; padding: 9px 12px; border: 0; border-radius: 9px; background: var(--loea-acc); color: #fff; font: 600 13px/1.2 inherit; cursor: pointer; } .en-btn:hover { filter: brightness(1.07); } .en-btn.sec { background: transparent; color: var(--loea-acc); border: 1px solid var(--loea-acc); } .en-btn[disabled] { opacity: .45; cursor: default; filter: none; } .en-fila2 { display: flex; gap: 8px; margin-top: 9px; } .en-rot { margin: 18px 0 9px; font: 600 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--loea-mut); } /* ══════════════════════════════════════════════════════════════════════ 4 · LA BARRA DE UNA PARADA — el ‹ de volver, el título y el contador ══════════════════════════════════════════════════════════════════════ */ .en-barra { display: flex; align-items: center; gap: 10px; padding: 11px 0 9px; } .en-barra .atras { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border-radius: 8px; border: 1px solid var(--loea-line); background: var(--loea-card); color: var(--loea-ink); font-size: 15px; line-height: 1; cursor: pointer; } .en-barra .mt { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; color: var(--loea-ink); } /* El título cede con «…»; el botón de la ayuda, nunca (ARMAZON-DEL-PANEL §12). */ .en-barra .mt .t { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .en-barra .en-ayuda { flex-shrink: 0; white-space: nowrap; color: var(--loea-ink); text-decoration: none; font-weight: 600; font-size: 14px; } .en-barra .en-ayuda:hover { text-decoration: underline; } .en-barra .mt small { display: block; font-weight: 400; font-size: 11.5px; color: var(--loea-mut); } .en-barra .cont { flex: 0 0 auto; font: 500 11.5px var(--font-mono); color: var(--loea-mut); } .en-avance { margin-bottom: 12px; } /* ══════════════════════════════════════════════════════════════════════ 5 · LA RUTA — las tres cosas en un solo hilo ══════════════════════════════════════════════════════════════════════ Clase, ejercicio y examen NO son tres menús: son tres tipos de parada de la misma lista, y se distinguen por el icono (`DISENO.md` §2). Así el alumno no tiene que decidir qué le toca — se lo dice la lista. */ .en-ruta { list-style: none; margin: 0; padding: 0; } /* Sin `width: 100%`: un `li` en flex ya ocupa el ancho, y con el padding encima se salía 24 px por la derecha — el «hecha» de la clase quedaba cortado dentro de Excel (1 sep 2026). El `box-sizing` va además para que volver a poner un ancho no lo repita. */ .en-ruta li { box-sizing: border-box; display: flex; align-items: flex-start; gap: 10px; padding: 10px 11px; margin-bottom: 6px; text-align: left; background: var(--loea-card); border: 1px solid var(--loea-line); border-radius: 10px; cursor: pointer; font: inherit; color: inherit; } .en-ruta li .pt { flex: 0 0 20px; text-align: center; font-size: 13px; line-height: 1.5; } .en-ruta li .txt { flex: 1; min-width: 0; } .en-ruta li .txt span { display: block; font: 600 10px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--loea-mut); } .en-ruta li .txt b { display: block; font-size: 13px; color: var(--loea-ink); } .en-ruta li .marca { flex: 0 0 auto; font: 500 11px var(--font-mono); color: var(--loea-mut); } /* Hecha, aquí, sin crédito, futura y cerrada. La de «aquí» es la única con acento: es la que hay que ver primero al abrir la ruta. */ .en-ruta li.hecha .pt { color: var(--loea-ok, var(--loea-acc)); } .en-ruta li.aqui { border-color: var(--loea-acc); box-shadow: var(--loea-sombra-1); } .en-ruta li.aqui .txt span { color: var(--loea-acc); } .en-ruta li.futuro { opacity: .72; } .en-ruta li.cerrada { opacity: .72; cursor: default; } /* La trabajada que no contó NO se atenúa: `futuro` y `cerrada` bajan la opacidad porque no hay nada que hacer en ellas todavía, y aquí es al revés — es a la que hay que volver. Va en latón, que en esta familia es «mírame», no «error»: el alumno no hizo nada mal (`DISENO.md` §1.1). */ .en-ruta li.sin-credito .pt { color: var(--loea-brass); } /* Y desde el reparto por celda esta marca puede decir DOS cosas —«8/12» y que la parada sigue abierta—, o sea el doble de largo que «no contó». Medido a 340 px: en un solo renglón se comía 59 px del título y lo partía en dos. Se envuelve ELLA, que es la que sobra, y el título se queda entero. */ .en-ruta li .marca.sin-credito { color: var(--loea-brass); max-width: 66px; text-align: right; line-height: 1.35; } /* ══════════════════════════════════════════════════════════════════════ 6 · LA CLASE PASO A PASO — qué escribir arriba, por qué debajo ══════════════════════════════════════════════════════════════════════ Es la estructura del LOEA Lab, que era lo que le gustaba, con una diferencia: la fórmula se puede poner sola en la celda («Házmelo»), y el «por qué» dice también qué pasa si NO lo haces así, que es lo que se recuerda. */ .en-pasos { display: flex; gap: 4px; margin: 2px 0 15px; } .en-pasos i { flex: 1; height: 3px; border-radius: 3px; background: var(--loea-line); } .en-pasos i.hecho { background: var(--loea-acc); } .en-pasos i.hoy { background: var(--loea-acc); opacity: .45; } /* El aire de ARRIBA es suyo, no del vecino. Con `margin-top: 0` cada rótulo respiraba lo que le tocara: 13 px detrás del objetivo, 4 detrás del «por qué» y CERO detrás de los botones —«POR QUÉ» salía montado encima de «Ya lo hice», visto en Excel el 1 sep 2026—. Los márgenes verticales de hermanos COLAPSAN, así que esto no suma nada donde ya había 13: sólo pone suelo. */ .en-cap { margin: 13px 0 6px; font: 600 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--loea-mut); } .en-objetivo { margin: 0 0 13px; font-size: 13px; color: var(--loea-ink); } .en-formula { padding: 11px 12px; border-radius: 9px; background: var(--loea-card); border: 1px solid var(--loea-line); font: 600 14px/1.4 var(--font-mono); color: var(--loea-ink); word-break: break-all; } .en-formula em { font-style: normal; color: var(--loea-acc); } /* La RUTA DE CLICS del paso que crea una tabla (21 sep 2026, `DISENO.md` §5 bis). Ocupa el sitio de `.en-formula`, y con su misma caja: es la misma pregunta —«¿qué hago?»— con otra respuesta. Las teclas son los botones de Excel que hay que pulsar, con relieve para que se lean como botón y no como palabra. Viene de `docs/maqueta-paso-crear-tabla.html`, tal cual. */ .en-clics { margin: 0; padding: 10px 12px 10px 30px; border-radius: 9px; background: var(--loea-card); border: 1px solid var(--loea-line); font-size: 12.5px; line-height: 1.6; color: var(--loea-ink); } .en-clics li { margin: 2px 0; } .en-clics code { font: 600 11.5px var(--font-mono); color: var(--loea-acc); } .en-clics .tecla { display: inline-block; font: 600 11px/1 var(--font-body); padding: 3px 7px 2px; border: 1px solid var(--loea-line); border-bottom-width: 2px; border-radius: 5px; background: var(--loea-panel); color: var(--loea-ink); } .en-porque { margin: 0 0 4px; padding: 11px 12px; border-radius: 9px; background: var(--loea-card); border: 1px solid var(--loea-line); font-size: 12.5px; line-height: 1.55; color: var(--loea-ink); } .en-porque ul { margin: 8px 0 0; padding-left: 17px; } .en-porque li { margin-bottom: 5px; } .en-porque code { font: 600 11.5px var(--font-mono); color: var(--loea-acc); } .en-nav { display: flex; gap: 8px; margin-top: 16px; } .en-nav button { flex: 1; padding: 9px; border-radius: 9px; border: 1px solid var(--loea-line); background: var(--loea-card); color: var(--loea-ink); font: 600 12.5px inherit; cursor: pointer; } .en-nav button.pri { background: var(--loea-acc); color: #fff; border-color: transparent; } .en-nav button[disabled] { opacity: .4; cursor: default; } /* El aviso de un paso que todavía no está: nunca en rojo. Un paso a medias no es un error del alumno, es un paso a medias. */ .en-aviso { margin: 11px 0 0; padding: 10px 12px; border-radius: 9px; background: var(--loea-card); border: 1px solid var(--loea-line); border-left: 3px solid var(--loea-acc); font-size: 12.5px; color: var(--loea-ink); } /* El aviso de un paso de CLASE que salió BIEN. Antes «Bien. Puedes seguir» y «falta copiar la fórmula hacia abajo» se pintaban idénticos —el mismo borde de acento—, así que el color no decía nada y había que leer para saber cuál era. Verde es lo que en toda la familia significa «esto está bien». */ .en-aviso.ok { border-left-color: var(--loea-si); background: var(--loea-si-soft); } /* Desde el 10 sep 2026 el aviso puede llevar SALIDA: es el caso del 403 —«esta práctica no está entre tus cursos»—, donde dejarlo con la noticia y sin puerta es el callejón sin salida que el §7 prohíbe. El `

` va sin margen propio para que la caja no crezca cuando no hay liga. */ .en-aviso p { margin: 0; } /* El nombre de LO QUE tocó, encima del porqué: sin él, el mensaje del servidor nombra el CURSO y el alumno cree que le hablan de otra cosa. */ .en-aviso b { display: block; margin-bottom: 3px; } .en-aviso .en-academia { display: inline-block; margin-top: 8px; } /* Por qué «Siguiente» está apagado, escrito debajo de la navegación. Era un `title` —un globito que hay que descubrir con el ratón encima de un botón gris—, y en el panel de Excel eso no lo encuentra nadie. */ .en-nav-nota { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--loea-mut); } /* ⚑ «YA ESTÁ: PULSA SIGUIENTE» (7 sep 2026) — el fallo del 4 sep dado la vuelta. Entonces «Siguiente» se quedaba gris sin explicar por qué; ahora se encendía sin que nadie lo notara. Él, probándolo: *«le das ya lo hice o házmelo y no se entiende que tiene que darle al botón siguiente»*. TRES REGLAS, y las tres se pueden defender: 1. **Se apaga solo.** Tres latidos y para (`ease-out 3`). Un botón que parpadea para siempre deja de ser un aviso y pasa a ser ruido — es la misma regla que la bandeja de la fase 11, que sale sólo si hay algo que atender. 2. **Late el BORDE, no el botón.** Escalarlo o cambiarle el color lo mueve de sitio y empuja lo que tiene debajo; un anillo que se expande y se desvanece llama igual y no toca la maqueta. 3. **Con las animaciones desactivadas, un aro fijo.** Quien las apaga no renuncia a que le digan dónde pulsar. Y el renglón escrito de al lado sigue estando en los dos casos: la animación lleva la vista, el texto dice a dónde lleva el botón. */ @keyframes en-toca { 0% { box-shadow: 0 0 0 0 var(--loea-si-fondo); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* ⚑ Y EL BOTÓN SE PONE VERDE (7 sep 2026, y costó TRES intentos). ══ LOS DOS QUE NO SIRVIERON, porque explican el que sí ══════════════ 1 · SÓLO EL LATIDO. A los 3,5 s el botón volvía a ser idéntico a cualquier otro encendido. Si en esos segundos estabas leyendo los puntos del «Por qué» —que están justo encima—, levantabas la vista y no quedaba rastro. Un aviso MOMENTÁNEO para una condición que PERMANECE. 2 · UN ARO FIJO alrededor del botón. Tampoco, y el motivo lo dijo él en una frase: *«es que cuando se queda fijo se pierde»*. Claro que se perdía — el aro era del MISMO ciruela que el botón, así que un botón listo y uno cualquiera se distinguían por 2 px de borde. La lección de los dos: **no se avisa poniéndole un adorno al mismo estado, se avisa cambiando de estado.** Un color distinto no se puede perder. Con sólo el aro no bastaba, y el motivo lo dijo él en una frase: *«es que cuando se queda fijo se pierde»*. Claro que se pierde — el aro era del MISMO ciruela que el botón, así que un botón listo y uno cualquiera se distinguían por 2 px de borde. Un cambio de COLOR no se puede perder: es otro estado, no un adorno encima del mismo estado. Verde y no otro porque el verde ya significa «correcto» en toda la familia (`--loea-si`, los veredictos): el paso está bien → sigue. No se inventa vocabulario, se usa el que el alumno ya aprendió tres pantallas antes. ⚠ Y con `--loea-si-FONDO`, que es el par nuevo del núcleo. `--loea-si` se ACLARA en oscuro para leerse sobre el fondo de la página; rellenar con él y dejar el texto blanco del `.pri` daría blanco sobre verde claro. Es la misma trampa que el acento resolvió hace tiempo con `--loea-acc-fondo`. Y SIN ARO: con el botón ya verde, un aro verde alrededor es invisible por el mismo motivo por el que lo era el ciruela. El aro fue el intento anterior y se cae solo cuando cambia el color — el COLOR es la señal que permanece, el latido sólo la señala al aparecer. Dos avisos, no tres. */ .en-nav button.pri.listo { background: var(--loea-si-fondo); color: var(--loea-on-acc); animation: en-toca 1.15s ease-out 3; } .en-nav-nota.listo { color: var(--loea-si); } /* Sin animación, el aro solo — que ahora ya está siempre. Lo que se quita es el latido, no el aviso. */ @media (prefers-reduced-motion: reduce) { .en-nav button.pri.listo { animation: none; } } /* «Esta parada no cuenta»: el que sale AL ENTRAR, antes del enunciado. Va en latón y no en rojo por lo mismo que el candado y la solución — en toda la familia el latón dice «esto cuesta algo», nunca «lo hiciste mal». Y se pega arriba del todo (`margin-top: 0`) porque es lo primero de la pantalla. */ .en-aviso.gastada { margin-top: 0; margin-bottom: 11px; background: var(--loea-brass-soft); border-color: var(--loea-brass-line); border-left-color: var(--loea-brass); } /* ══════════════════════════════════════════════════════════════════════ 7 · EL EJERCICIO — el enunciado, las celdas, el veredicto y las pistas ══════════════════════════════════════════════════════════════════════ Portado de `docs/maqueta-hoja-y-panel.html`, pantalla 4, que es donde se decidió mirándolo. Los colores salen todos de tokens del núcleo: `si` para lo que está bien, `mal` para lo que no, y LATÓN para la solución — el mismo latón del candado, porque en toda la familia dice «esto cuesta algo». */ .en-enunciado { font-size: 12.5px; line-height: 1.6; color: var(--loea-ink); background: var(--loea-card); border: 1px solid var(--loea-line); border-left: 3px solid var(--loea-acc); border-radius: 0 9px 9px 0; padding: 10px 12px; } /* «Celdas que te tocan» — el ejercicio puede pedir más de una, y entonces saber CUÁL falló importa más que el veredicto. */ .en-celdas { margin: 10px 0 0; } .en-celda { box-sizing: border-box; display: flex; align-items: center; gap: 9px; background: var(--loea-card); border: 1px solid var(--loea-line); border-radius: 8px; padding: 7px 10px; margin-top: 6px; font-size: 12px; } .en-celda .ref { font: 600 12px var(--font-mono); color: var(--loea-acc); width: 34px; flex: none; } .en-celda .est { flex: 1; min-width: 0; color: var(--loea-mut); } .en-celda .ir { font: 600 11px var(--font-body); color: var(--loea-acc); background: var(--loea-soft); border: 0; border-radius: 6px; padding: 3px 9px; cursor: pointer; /* ⚑ 8 oct 2026, visto en Excel: `menu-ac.css` hace que todo botón ocupe el ancho completo, y en la ventana de la familia le pega también a este botón. Se estiraba a lo ancho y dejaba «aquí va tu respuesta» una palabra por renglón. */ width: auto; flex: none; margin: 0; white-space: nowrap; } .en-celda.bien { border-color: var(--loea-si); background: var(--loea-si-soft); } .en-celda.bien .ref, .en-celda.bien .est { color: var(--loea-si); } .en-celda.mal { border-color: var(--loea-mal-line); background: var(--loea-mal-soft); } .en-celda.mal .ref { color: var(--loea-mal); } /* El mismo latón del veredicto «a medias»: el `casi`, la celda vacía y lo que no se pudo revisar. Ni verde ni rojo, porque no es ninguna de las dos. */ .en-celda.medias { border-color: var(--loea-brass-line); background: var(--loea-brass-soft); } .en-celda.medias .ref { color: var(--loea-brass); } /* El veredicto. Dice QUÉ estuvo mal, no sólo que estuvo mal — `DISENO.md` §3. */ .en-veredicto { margin-top: 10px; font-size: 12.5px; line-height: 1.6; border-radius: 9px; padding: 10px 12px; } .en-veredicto.mal { background: var(--loea-mal-soft); border: 1px solid var(--loea-mal-line); color: var(--loea-ink); } .en-veredicto.mal b { color: var(--loea-mal); } .en-veredicto.bien { background: var(--loea-si-soft); border: 1px solid var(--loea-si); color: var(--loea-ink); } .en-veredicto.bien b { color: var(--loea-si); } /* El `casi` y el `sin_revisar` no son un error del alumno, y no se pintan de rojo: uno dice «el número está bien, el método no» y el otro es cosa NUESTRA. Rojo ahí sería acusarle de algo que no hizo. */ .en-veredicto.medias { background: var(--loea-card); border: 1px solid var(--loea-line); border-left: 3px solid var(--loea-brass); color: var(--loea-ink); } .en-veredicto.medias b { color: var(--loea-brass); } /* Pistas escalonadas: la abierta se lee, las cerradas se ven y se pueden abrir. */ .en-pista { box-sizing: border-box; width: 100%; text-align: left; display: block; background: var(--loea-card); border: 1px solid var(--loea-line); border-radius: 9px; padding: 9px 11px; margin-top: 7px; font: inherit; font-size: 12px; line-height: 1.55; color: var(--loea-ink); } .en-pista .cab { display: flex; align-items: center; gap: 7px; font: 600 11px var(--font-body); letter-spacing: .03em; color: var(--loea-acc); } .en-pista p { margin: 6px 0 0; color: var(--loea-ink); } .en-pista.cerrada { border-style: dashed; color: var(--loea-mut); cursor: pointer; } .en-pista.cerrada .cab { color: var(--loea-mut); } .en-pista.solucion { background: var(--loea-brass-soft); border-color: var(--loea-brass-line); border-style: dashed; } .en-pista.solucion .cab { color: var(--loea-brass); } .en-pista.solucion[disabled] { cursor: default; } /* El procedimiento de la solución: el último nivel de ayuda enseña el CAMINO, no sólo el destino (`FORMATO-CURSO.md` §4.2). Por eso va numerado. */ .en-pista ol { margin: 7px 0 0; padding-left: 18px; } .en-pista ol li { margin-bottom: 4px; } /* ══════════════════════════════════════════════════════════════════════ 8 · EL EXAMEN — el reloj y el mapa de preguntas ══════════════════════════════════════════════════════════════════════ Portado de la maqueta, pantalla 5. El reloj se pone ROJO cuando queda poco, y eso es lo único de toda el área que usa el rojo para meter prisa en vez de para decir «esto está mal». */ .en-cron { display: flex; align-items: baseline; justify-content: center; gap: 8px; background: var(--loea-card); border: 1px solid var(--loea-line); border-radius: 11px; padding: 10px 12px; } .en-cron b { font: 500 30px/1 var(--font-mono); color: var(--loea-ink); letter-spacing: -.02em; } .en-cron span { font: 600 10px var(--font-body); letter-spacing: .13em; text-transform: uppercase; color: var(--loea-mut); } .en-cron.poco b { color: var(--loea-mal); } .en-reloj { height: 5px; border-radius: 99px; background: var(--loea-line); margin-top: 8px; overflow: hidden; } .en-reloj i { display: block; height: 100%; border-radius: 99px; background: var(--loea-acc); } .en-reloj.poco i { background: var(--loea-mal); } /* Las doce preguntas TIENEN que caber en un renglón: si la doce se va sola abajo, se lee como si fuera de otra cosa. A 340 px eso son 21 px de lado. Son BOTONES y no `` como en la maqueta: aquí se pulsan para ir a una pregunta, y un elemento que se pulsa tiene que poder pulsarse con el teclado. */ .en-preg { display: flex; gap: 4px; margin-top: 10px; } .en-preg button { box-sizing: border-box; flex: 1; height: 21px; padding: 0; border-radius: 6px; display: grid; place-items: center; cursor: pointer; font: 600 10.5px var(--font-mono); background: var(--loea-card); border: 1px solid var(--loea-line); color: var(--loea-mut); } .en-preg button.hecha { background: var(--loea-soft); border-color: var(--loea-acc); color: var(--loea-acc); } .en-preg button.hoy { background: var(--loea-acc-fondo); border-color: var(--loea-acc-fondo); color: var(--loea-on-acc); } /* El aviso del examen va en LATÓN y no en el acento de siempre: es la única pantalla donde el latón dice «esto no lo tienes» en vez de «esto se compra» (maqueta, pie de la pantalla 5). */ .en-aviso.examen { background: var(--loea-brass-soft); border-color: var(--loea-brass-line); border-left-color: var(--loea-brass); } .en-aviso.examen b { color: var(--loea-brass); } /* ══════════════════════════════════════════════════════════════════════ 9 · EL REPORTE — la calificación y el desglose por tema ══════════════════════════════════════════════════════════════════════ */ .en-calif { text-align: center; background: var(--loea-card); border: 1px solid var(--loea-line); border-radius: 12px; padding: 16px 12px; box-shadow: var(--loea-sombra-1); } .en-calif .num { font: 500 46px/1 var(--font-display); color: var(--loea-si); letter-spacing: -.03em; } .en-calif .num s { font-size: 20px; color: var(--loea-mut); text-decoration: none; } .en-calif .tag { display: inline-block; margin-top: 8px; font: 700 10px var(--font-body); letter-spacing: .11em; text-transform: uppercase; border-radius: 999px; padding: 3px 12px; background: var(--loea-si-soft); color: var(--loea-si); border: 1px solid var(--loea-si); } .en-calif p { margin: 9px 0 0; font: 500 11.5px var(--font-mono); color: var(--loea-mut); } /* No aprobado NO es rojo de error: es una nota que no llegó, y se vuelve a presentar. El latón de «te falta algo» dice eso mejor. */ .en-calif.flojo .num { color: var(--loea-brass); } .en-calif.flojo .tag { background: var(--loea-brass-soft); color: var(--loea-brass); border-color: var(--loea-brass-line); } /* Y sin nota no se pinta un cero verde ni uno rojo: no se pudo calificar. */ .en-calif.sinnota .num { color: var(--loea-mut); font-size: 30px; } .en-tema { display: flex; align-items: center; gap: 9px; margin-top: 9px; font-size: 12px; } .en-tema .nom { flex: 1; min-width: 0; color: var(--loea-ink); } .en-tema .bar { width: 86px; height: 6px; border-radius: 99px; background: var(--loea-line); overflow: hidden; flex: none; } .en-tema .bar i { display: block; height: 100%; border-radius: 99px; background: var(--loea-acc); } .en-tema .bar.flojo i { background: var(--loea-brass); } .en-tema .val { font: 500 11px var(--font-mono); color: var(--loea-mut); flex: none; } /* Un tema en CERO no tiene barra que pintar, así que el color tiene que estar en el texto o la fila se lee como «sin datos» en vez de como «esto es lo que fallaste» — y es justo la fila que da sentido a «Repasar lo que fallé». Visto en el visor el 1 sep 2026, con un BUSCARX 0/10. */ .en-tema.flojo .nom, .en-tema.flojo .val { color: var(--loea-brass); } /* ══════════════════════════════════════════════════════════════════════ 10 · LA LIGA A LA ACADEMIA — en TODAS las pantallas ══════════════════════════════════════════════════════════════════════ `DISENO.md` §7, regla 1: ninguna pantalla es un callejón sin salida hacia la academia. El complemento no compite con ella: la surte. */ .en-academia { display: block; margin: 15px 0 4px; padding: 9px 11px; border-radius: 9px; background: var(--loea-card); border: 1px dashed var(--loea-line); font-size: 12px; color: var(--loea-acc); text-decoration: none; text-align: center; } .en-academia:hover { border-style: solid; } /* El candado por curso. Latón, que en toda la familia dice «esto está bajo llave», y NUNCA rojo: no es un error, es algo que aún no compró. */ .en-llave { display: inline-block; margin-top: 6px; font-size: 11.5px; color: var(--loea-brass); } /* «Quitar» de un curso abierto de un archivo. Pequeño y al lado, no un botón de ancho completo: en la tarjeta pesaba más que el nombre del curso, y lo que se hace ahí es entrar al curso, no quitarlo. */ .en-quitar { display: inline-block; margin-top: 6px; padding: 3px 10px; border: 0; border-radius: 6px; background: var(--loea-soft); color: var(--loea-acc); font: 600 11px var(--font-body); cursor: pointer; } .en-quitar:hover { filter: brightness(.96); } /* ══════════════════════════════════════════════════════════════════════ VOLVER A EMPEZAR EL CURSO ENTERO ══════════════════════════════════════════════════════════════════════ Discreto en reposo —es una salida, no el camino— y de latón cuando está preguntando «¿seguro?», que es el color con el que esta área dice «esto te cuesta algo»: el mismo de la tira del ejercicio gastado y del «no contó» de la ruta. Que la confirmación cambie de COLOR y no sólo de texto es lo que impide el doble clic distraído. */ .en-reempezar-curso { display: block; box-sizing: border-box; width: 100%; margin: 18px 0 4px; padding: 8px 12px; border: 1px solid var(--loea-line); border-radius: 8px; background: transparent; color: var(--loea-mut); font: 600 12px var(--font-body); cursor: pointer; } .en-reempezar-curso:hover { border-color: var(--loea-acc); color: var(--loea-acc); } .en-reempezar-curso.confirmando { border-color: var(--loea-brass); background: var(--loea-brass-soft); color: var(--loea-brass); } /* ══════════════════════════════════════════════════════════════════════ LA SOLUCIÓN, CELDA A CELDA ══════════════════════════════════════════════════════════════════════ Un ejercicio puede pedir cinco fórmulas —la regata pide cinco— y hasta el 2 sep 2026 sólo se destacaba UNA: el resto quedaba en la letra pequeña del procedimiento. Ahora cada celda lleva su recuadro y, debajo, su razón. «Una fórmula sin su razón es una respuesta para copiar; con ella es una clase.» */ .en-formula-celda { display: inline-block; margin-right: 9px; padding: 1px 7px; border-radius: 5px; background: var(--loea-brass-soft); color: var(--loea-brass); font: 600 11px var(--font-mono); } .en-formula-porque { margin: 5px 0 12px; padding-left: 2px; font-size: 12px; line-height: 1.5; color: var(--loea-mut); } /* Sin razón, la fórmula siguiente necesita su propio aire. */ .en-formula + .en-formula { margin-top: 9px; } /* ── El buscador (encargo 16, 7 oct 2026) ────────────────────────────── La caja y los rótulos son del núcleo (`.loea-buscador`, `.loea-res`, `armazon.css`); las filas son de aquí, copiadas de las de Contabilidad (`co/src/taskpane/menu-co.css`). Lo dibujó `docs/maqueta-buscador.html`. */ .en-res .fn { display: flex; gap: 11px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--loea-line); cursor: pointer; transition: padding .14s; } .en-res .fn:hover { padding-left: 5px; } .en-res .fn:hover .titulo { color: var(--loea-acc); } .en-res .fn .ico { flex: none; width: 18px; text-align: center; } .en-res .fn .txt { flex: 1; min-width: 0; } .en-res .fn .titulo { font-size: 12.5px; line-height: 1.4; display: block; color: var(--loea-ink); transition: color .14s; } .en-res .fn .donde { font: 500 10.5px var(--font-mono); color: var(--loea-mut); margin-top: 2px; display: block; } .en-res .mod { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 0 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--loea-line); cursor: pointer; transition: padding .14s; } .en-res .mod:hover { padding-left: 5px; } .en-res .mod:hover b { color: var(--loea-acc); } .en-res .mod .sym { font-size: 17px; text-align: center; } .en-res .mod b { font: 500 13.5px/1.2 var(--font-display); color: var(--loea-ink); transition: color .14s; } .en-res .mod .der { font: 500 10.5px var(--font-mono); color: var(--loea-mut); } .en-res mark { background: none; color: var(--loea-acc); font-weight: 700; } .en-res .cand { color: var(--loea-brass); font-size: 11px; }