Laboratorio de lógica digital

# Rol
Eres ingeniero de software especializado en aplicaciones educativas interactivas
y conoces el currículo de Tecnología de la ESO.

# Contexto
Soy profesor de Tecnología. Necesito una aplicación web para 4.º de ESO,
bloque de electrónica digital: puertas lógicas, tablas de verdad y funciones booleanas.
La voy a usar proyectada en clase y también en los portátiles del alumnado.
Esta aplicación es una pieza de escaparate: tiene que verse EXCELENTE
y tener pedagogía real, no ser una demo de juguete.

# Tarea
Construye «Laboratorio de lógica digital», una aplicación de una sola pantalla
con tres modos, conmutables con pestañas accesibles.

1) EXPLORAR.
El alumno elige una puerta entre NOT, AND, OR, NAND, NOR y XOR. En un lienzo oscuro
tipo banco de trabajo se dibuja el símbolo ANSI/IEEE correcto de esa puerta (distintivo
y reconocible: el semicírculo de la AND, el escudo curvo de la OR, la doble curva de la XOR,
el circulito de negación de NAND/NOR/NOT). Dos interruptores A y B (solo A si es NOT) que
el alumno conmuta con ratón o teclado; los cables se colorean según lleven 0 o 1 y la salida
enciende un LED. Debajo, la tabla de verdad completa de esa puerta con la fila actual
resaltada en vivo. Al lado, una tarjeta que explica la puerta en una frase llana («la AND
solo da 1 cuando las DOS entradas valen 1»), su expresión booleana (S = A · B, S = A + B,
S = A ⊕ B, S = ¬(A · B)…) y una analogía cotidiana de una línea.

2) MONTAR.
Un circuito de dos puertas encadenadas: tres entradas A, B y C, y dos huecos (la puerta 1
recibe A y B; la puerta 2 recibe la salida de la puerta 1 y la entrada C). El alumno elige
qué puerta va en cada hueco desde un desplegable, conmuta las tres entradas y ve propagarse
los valores por los cables, con el valor 0/1 rotulado en cada tramo. Se muestra la tabla de
verdad de las 8 combinaciones del circuito completo, recalculada en vivo, con la fila actual
resaltada. Un panel plantea un objetivo con enunciado real («que la alarma suene solo si la
puerta está abierta Y el sistema está armado, salvo que se haya pulsado el botón de
anulación») y comprueba automáticamente si la combinación de puertas elegida cumple la tabla
objetivo, avisando en cuántas filas de 8 coincide.

3) RETOS.
Seis retos de dificultad creciente, cada uno con un enunciado del mundo real (alarma de una
vivienda, riego automático de un invernadero, luz de un ascensor, detector de cinturón de
seguridad, ventilación de un taller, control de un semáforo de obra). En cada reto el alumno
decide la salida (0 o 1) para cada fila de la tabla de verdad, o elige la puerta que resuelve
el enunciado. Corrección inmediata con explicación del porqué en cada fila fallada: no solo
«mal», sino qué condición se cumple y qué debería salir. Barra de progreso y marcador de
aciertos. Botón de reintentar. Al terminar los seis, un resumen con el recuento y una frase
de cierre según el resultado. Nada punitivo: cada error se explica.

# Reglas
1) Una sola pantalla, sin recarga y sin enrutado.
2) Sin librerías externas, sin CDN y sin imágenes externas: todo gráfico va en SVG.
   Tiene que funcionar sin internet, porque en el aula 12 no hay wifi.
3) Accesible: todo se opera con teclado; los interruptores son botones reales con aria-pressed;
   los cambios de estado se anuncian con aria-live; los SVG informativos llevan role="img"
   con su descripción; foco visible con anillo.
4) Responsive de verdad: legible en un móvil de 360 px de ancho y espectacular proyectado
   en 1080p. Nunca puede haber scroll horizontal de la página.
5) No bases ninguna información SOLO en una animación.
6) Geometría SVG calculada con constantes, no a ojo: nada se solapa ni se sale del viewBox,
   y ningún texto por debajo de 13 px efectivos.
7) RIGOR: las tablas de verdad, los símbolos ANSI y la propagación lógica tienen que ser
   exactos. Un profesor de Tecnología va a ver esto proyectado. Revisa una por una las seis
   tablas de verdad y los seis enunciados: el enunciado en lenguaje natural tiene que
   corresponder EXACTAMENTE con la tabla que se pide. Compruébalo a mano antes de darlo
   por bueno.

# Formato
Paleta sobria: azul para lo primario, verde para el acierto y para la señal a 1, ámbar para
los avisos, rosa para el error, grises para lo neutro. El banco de trabajo donde vive el
circuito, en panel oscuro, para que contraste proyectado: cables a 0 en gris azulado, a 1 en
verde, y el LED encendido con halo. Tarjetas con borde suave y sombra ligera. Todo en español
de España, con tuteo al alumnado.

# Control
Antes de darlo por terminado: ejecútalo, recorre los tres modos entero y comprueba a mano la
lógica de las seis tablas de verdad. Cuando acabes, dime qué has dado por supuesto que yo no
te había dicho.