Banco de ensayo de tracción

# Rol
Eres ingeniero de software especializado en simulaciones educativas
y conoces la física de materiales a nivel de Bachillerato.

# Contexto
Soy profesor de Tecnología. Necesito un laboratorio virtual para 1.º de Bachillerato,
Tecnología e Ingeniería I, bloque de materiales y resistencia.
La idea pedagógica es que el alumnado DESCUBRA la curva tensión–deformación tirando
de una probeta, en vez de leerla en un libro.
Es una pieza de escaparate: tiene que verse excelente y tener pedagogía real.

# Tarea
Construye «Banco de ensayo de tracción», una aplicación de una sola pantalla.

ESCENA CENTRAL. Una máquina universal de ensayos: mordaza fija arriba, mordaza móvil abajo,
y entre ellas la probeta cilíndrica normalizada. Al aumentar la fuerza, la probeta se alarga
proporcionalmente en pantalla; al entrar en zona plástica el alargamiento se acelera; cerca
de la carga máxima aparece la estricción (el cuello se estrecha visiblemente en el centro);
al superar la deformación de rotura, la probeta se parte en dos con las superficies de
fractura separadas y el ensayo se detiene. Un rótulo permanente indica la fase actual:
«zona elástica», «zona plástica», «estricción», «rotura».

MANDOS. Selector de material; diámetro de la probeta en mm (de 4 a 20); longitud inicial L0
en mm (de 20 a 200); deslizador de fuerza F en kN; y un botón de «ensayo automático» que la
incrementa sola hasta la rotura, con pausa y reinicio.

Usa estos valores reales (de tablas técnicas habituales; cítalos en la app como orientativos):
- Acero S275 (estructural): E = 210 GPa, límite elástico 275 MPa, rotura 430 MPa, alargamiento 23 %.
- Aluminio 6061-T6: E = 69 GPa, límite elástico 275 MPa, rotura 310 MPa, alargamiento 12 %.
- Cobre recocido: E = 117 GPa, límite elástico 70 MPa, rotura 220 MPa, alargamiento 45 %.
- Fundición gris EN-GJL-250: E = 110 GPa, prácticamente sin zona plástica, rotura 250 MPa,
  alargamiento 0,6 % (material frágil: se rompe sin avisar).
- PLA impreso en 3D: E = 3,5 GPa, límite elástico 45 MPa, rotura 50 MPa, alargamiento 5 %.

GRÁFICA σ–ε. A la derecha, unos ejes con σ en MPa y ε en % donde la curva SE VA DIBUJANDO
conforme el alumno tira: no está dibujada de antemano. Sobre ella, un punto que marca el
estado actual. Cuando se superan, se rotulan los hitos: límite elástico, carga máxima y
punto de rotura. Zona elástica y zona plástica sombreadas de distinto color. El tramo
elástico tiene que ser una recta de pendiente E (σ = E · ε) y el plástico una curva que sube
hasta la resistencia a tracción y luego baja ligeramente hasta la rotura — salvo la fundición
gris, que rompe en plena recta elástica.

LECTURAS EN VIVO. Un panel de instrumentos con: área de la sección A = π·d²/4 en mm²,
tensión σ = F/A en MPa, alargamiento ΔL en mm, deformación unitaria ε = ΔL/L0 en %, y el
coeficiente de seguridad respecto del límite elástico (n = σe/σ). Cada magnitud con su
símbolo, su fórmula y su unidad, siempre visibles: es contenido de examen.

EL BOTÓN CLAVE: «SUELTA LA FUERZA». En cualquier momento el alumno puede pulsarlo y la
aplicación simula la descarga. Si estaba en zona elástica, la probeta vuelve EXACTAMENTE a su
longitud inicial y la app lo explica. Si estaba en zona plástica, queda deformación
permanente: la probeta se queda más larga, la gráfica dibuja la recta de descarga paralela al
tramo elástico hasta el eje, y se rotula la deformación remanente. Esta es la idea central
de todo el bloque: hazla protagonista.

TRES RETOS DE DIMENSIONADO, con corrección y razonamiento paso a paso:
1. Un tirante de acero S275 debe soportar 50 kN con coeficiente de seguridad 2.
   ¿Qué diámetro mínimo necesita?
2. Con una probeta de 10 mm de diámetro, ¿qué material aguanta más fuerza antes de
   deformarse permanentemente?
3. Una pieza de PLA impreso sustituye a una de aluminio en una fijación que soporta 3 kN.
   ¿Qué diámetro necesita cada una para no superar su límite elástico?

# 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 en SVG.
3) Accesible: el deslizador es un <input type="range"> real y los campos numéricos son
   <input type="number"> con min/max/step y su etiqueta; los estados relevantes se anuncian
   con aria-live; la gráfica es role="img" con una descripción de la curva y del estado.
4) Responsive: legible en un móvil de 360 px y espectacular proyectado en 1080p.
   Nunca puede haber scroll horizontal de la página.
5) No bases información SOLO en una animación: el estado siempre está también escrito.
6) Números en español: coma decimal y unidades siempre presentes, separadas del número.
7) LAS UNIDADES TIENEN QUE CUADRAR. σ [MPa] = F [N] / A [mm²]; 1 kN = 1000 N;
   E en GPa = 1000 MPa; ε adimensional, mostrado en %.

# Formato
Azul para la zona elástica, ámbar para la plástica, rosa para la rotura, verde para el
acierto. La máquina y la gráfica viven en un panel oscuro para que contrasten proyectadas.
Geometría SVG calculada con constantes: nada se solapa ni se sale del viewBox, y ningún
texto por debajo de 13 px efectivos.

# Control
Antes de darlo por terminado, comprueba a mano este caso y dime el resultado:
acero S275, d = 10 mm, L0 = 100 mm, F = 20 kN
→ A = 78,54 mm²; σ = 254,6 MPa (aún elástico, n = 1,08); ε = 0,121 %; ΔL = 0,121 mm.
Si tus cálculos no reproducen esto, están mal.
Dime también qué has dado por supuesto que yo no te había dicho.