diff --git a/public/catalog/figurasFINA.json b/public/catalog/figurasFINA.json
index f10bac7..5701ac8 100644
--- a/public/catalog/figurasFINA.json
+++ b/public/catalog/figurasFINA.json
@@ -3,54 +3,63 @@
     "nombre": "Pez Volador con Giro",
     "descripcion": "Impulso a vertical desde pike, transición a cola de pez aérea, regreso a vertical y giro de 180°.",
     "categoria": "1A",
+    "codigoElemento": "1A",
     "imagen": "pez-volador-giro.png"
   },
   {
     "nombre": "Pez Volador",
     "descripcion": "Impulso a vertical desde pike, transición a cola de pez aérea, regreso a vertical y descenso.",
     "categoria": "1B",
+    "codigoElemento": "1B",
     "imagen": "pez-volador.png"
   },
   {
     "nombre": "Rodilla Flexionada con Giro Completo",
     "descripcion": "Vertical con giro completo a rodilla flexionada, otro giro a vertical, apertura 180° a split y walkout.",
     "categoria": "2A",
+    "codigoElemento": "2A",
     "imagen": "rodilla-giro-completo.png"
   },
   {
     "nombre": "Rodilla Flexionada con Medio Giro",
     "descripcion": "Vertical con medio giro a rodilla flexionada, otro medio giro a vertical, split y walkout.",
     "categoria": "2B",
+    "codigoElemento": "2B",
     "imagen": "rodilla-medio-giro.png"
   },
   {
     "nombre": "Fouetté con Giro 720°",
     "descripcion": "Desde cola de pez, dos giros Fouetté, paso a vertical y giro continuo de 720°.",
     "categoria": "3A",
+    "codigoElemento": "3A",
     "imagen": "fouette-720.png"
   },
   {
     "nombre": "Fouetté con Giro 360°",
     "descripcion": "Desde cola de pez, dos giros Fouetté, paso a vertical y giro rápido de 360°.",
     "categoria": "3B",
+    "codigoElemento": "3B",
     "imagen": "fouette-360.png"
   },
   {
     "nombre": "Mariposa",
     "descripcion": "Secuencia dinámica con pike, cola de pez, split, giros, arco superficial y salida en layout.",
     "categoria": "4",
+    "codigoElemento": "4",
     "imagen": "mariposa.png"
   },
   {
     "nombre": "Split con Giro 180°",
     "descripcion": "Impulso a vertical, split aéreo, giro 180° a rodilla flexionada y descenso vertical.",
     "categoria": "5A",
+    "codigoElemento": "5A",
     "imagen": "split-giro.png"
   },
   {
     "nombre": "Split a Rodilla Flexionada",
     "descripcion": "Impulso a vertical, split aéreo, transición a rodilla flexionada y descenso vertical.",
     "categoria": "5B",
+    "codigoElemento": "5B",
     "imagen": "split-rodilla.png"
   }
 ]
diff --git a/public/css/editorPiscina.css b/public/css/editorPiscina.css
index 281ee39..7830f3c 100644
--- a/public/css/editorPiscina.css
+++ b/public/css/editorPiscina.css
@@ -1,212 +1,4 @@
-/* GENERAL */
-body {
-  font-family: 'Inter', sans-serif;
-  background-color: #f9fafb;
-  color: #212529;
-  margin: 0;
-  padding: 0;
-}
-
-/* TARJETAS */
-.card {
-  border: none;
-  border-radius: 1rem;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-  background-color: #fff;
-  overflow: visible;
-}
-
-.card-body {
-  overflow: visible;
-}
-
-/* FORMULARIOS */
-.form-control,
-.form-select {
-  border-radius: 0.75rem;
-  font-size: 1rem;
-  transition: border-color 0.3s ease, box-shadow 0.3s ease;
-}
-
-.form-control:focus,
-.form-select:focus {
-  border-color: #0d6efd;
-  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
-}
-
-/* BOTONES */
-button,
-.btn {
-  border-radius: 0.75rem;
-  transition: all 0.25s ease;
-  font-weight: 600;
-}
-
-.btn:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
-}
-
-#btnAgregarAtleta,
-#btnActualizarPiscina,
-#btnGuardarFormacion,
-#playPauseBtn {
-  padding: 0.75rem 1rem;
-  font-size: 1rem;
-}
-
-#playPauseBtn {
-  background-color: #0d6efd;
-  color: white;
-  font-weight: 500;
-  border: none;
-  border-radius: 8px;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-}
-
-#playPauseBtn:hover {
-  background-color: #084298;
-  transform: scale(1.05);
-}
-
-/* MULTIMEDIA */
-#waveform {
-  width: 100%;
-  height: 100px;
-  margin-bottom: 10px;
-}
-
-#audioPlayer {
-  display: none;
-}
-
-/* PISCINA */
-#piscinaContainer {
-  background-color: #e6f7ff;
-  border: 2px dashed #007bff;
-  padding: 1rem;
-  border-radius: 0.75rem;
-  width: fit-content;
-  height: fit-content;
-  min-width: 300px;
-  min-height: 200px;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-#piscina {
-  display: block;
-  width: 100% !important;
-  height: 100% !important;
-  min-width: 300px;
-  min-height: 200px;
-  background-image:
-    linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),
-    linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);
-  background-size: 45px 45px;
-  background-position: top left;
-  position: relative;
-  overflow: hidden;
-}
-
-/* TIMELINE */
-.timeline-placeholder {
-  display: flex;
-  overflow-x: auto;
-  gap: 10px;
-  padding: 1rem;
-  border: 1px solid #ddd;
-  background: #ffffff;
-  border-radius: 0.75rem;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
-}
-
-.timeline-placeholder .step {
-  min-width: 100px;
-  padding: 0.5rem;
-  border: 1px solid #ccc;
-  background: white;
-  border-radius: 8px;
-  text-align: center;
-  cursor: pointer;
-  font-size: 0.85rem;
-  transition: all 0.2s ease;
-  box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
-}
-
-.timeline-placeholder .step:hover {
-  background-color: #dbeafe;
-  font-weight: bold;
-  transform: scale(1.03);
-}
-
-.step.active {
-  background-color: #0d6efd !important;
-  color: white !important;
-  font-weight: bold;
-}
-
-/* AUTOCOMPLETADO */
-#sugerenciasFigura {
-  margin-top: 4px;
-  padding: 6px 0;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
-  max-height: 160px;
-  overflow-y: auto;
-  position: absolute;
-  width: 100%;
-  z-index: 10;
-}
-
-#sugerenciasFigura button {
-  display: block;
-  width: 100%;
-  padding: 6px 12px;
-  font-size: 0.9rem;
-  border: none;
-  background: none;
-  text-align: left;
-  color: #333;
-  cursor: pointer;
-  transition: background 0.2s ease;
-}
-
-#sugerenciasFigura button:hover {
-  background-color: #edf6ff;
-  color: #007bff;
-  font-weight: 500;
-}
-
-/* VISTA PREVIA FIGURA */
-#previewFigura img {
-  margin-top: 8px;
-  max-width: 100%;
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  height: auto;
-}
-
-#previewFigura p {
-  font-size: 0.85rem;
-  color: #555;
-  margin-top: 4px;
-}
-
-/* RESPONSIVO */
-@media (max-width: 768px) {
-  #piscina {
-    min-height: 300px;
-  }
-
-  .timeline-placeholder .step {
-    min-width: 80px;
-    font-size: 0.75rem;
-  }
-}
-/* ---------- ESTILO GLOBAL 2025 ---------- */
+/* ------------------- ESTILO GLOBAL ------------------- */
 :root {
   --color-primary: #0d6efd;
   --color-success: #198754;
@@ -216,16 +8,67 @@ button,
   --font-family: 'Inter', sans-serif;
 }
 
-/* Fuentes y cuerpo */
+html {
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+}
+
 body {
   font-family: var(--font-family);
-  font-size: clamp(1rem, 1vw + 0.2rem, 1.125rem);
+  font-size: clamp(1rem, 1vw + 0.2rem, 1.1rem);
   line-height: 1.7;
   background-color: #f9fafb;
   color: #212529;
+  margin: 0;
+  padding: 0;
 }
 
-/* Botones unificados */
+/* ------------------- NAVBAR ------------------- */
+.navbar {
+  min-height: 72px;
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
+}
+
+.navbar .nav-link {
+  font-weight: 500;
+  font-size: 1rem;
+  transition: all 0.2s ease;
+}
+
+.navbar .nav-link:hover {
+  opacity: 0.85;
+}
+
+.navbar * {
+  box-sizing: border-box;
+}
+
+/* ------------------- TARJETAS ------------------- */
+.card {
+  border: none;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  background-color: white;
+  overflow: visible;
+}
+
+/* ------------------- FORMULARIOS ------------------- */
+.form-control,
+.form-select {
+  border-radius: var(--radius-lg);
+  border: 1px solid #ced4da;
+  transition: var(--transition-fast);
+  font-size: 1rem;
+}
+
+.form-control:focus,
+.form-select:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
+}
+
+/* ------------------- BOTONES ------------------- */
 button,
 .btn {
   border-radius: var(--radius-lg);
@@ -248,7 +91,6 @@ button,
   border-color: var(--color-primary);
   color: #fff;
 }
-
 .btn-primary:hover {
   background-color: #084298;
   border-color: #084298;
@@ -259,7 +101,6 @@ button,
   border-color: var(--color-success);
   color: white;
 }
-
 .btn-success:hover {
   background-color: #145c32;
   border-color: #145c32;
@@ -270,7 +111,6 @@ button,
   border-color: var(--color-primary);
   background-color: white;
 }
-
 .btn-outline-primary:hover {
   background-color: var(--color-primary);
   color: white;
@@ -281,37 +121,142 @@ button,
   border-color: #6c757d;
   background-color: white;
 }
-
 .btn-outline-secondary:hover {
   background-color: #6c757d;
   color: white;
 }
 
-/* Formulario */
-.form-control,
-.form-select {
-  border-radius: var(--radius-lg);
-  border: 1px solid #ced4da;
-  transition: var(--transition-fast);
-}
-
-.form-control:focus,
-.form-select:focus {
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
-}
-
-/* Tarjetas */
-.card {
-  border: none;
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-md);
-  background-color: white;
-}
-
-/* Botón desactivado coherente */
 button:disabled,
 .btn:disabled {
   opacity: 0.65;
   cursor: not-allowed;
 }
+
+/* ------------------- PISCINA ------------------- */
+#piscinaContainer {
+  background-color: #e6f7ff;
+  border: 2px dashed #007bff;
+  padding: 1rem;
+  border-radius: var(--radius-lg);
+  width: fit-content;
+  height: fit-content;
+  min-width: 300px;
+  min-height: 200px;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+#piscina {
+  display: block;
+  width: 100% !important;
+  height: 100% !important;
+  background-image:
+    linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);
+  background-size: 45px 45px;
+  background-position: top left;
+  overflow: hidden;
+}
+
+/* ------------------- TIMELINE ------------------- */
+.timeline-placeholder {
+  display: flex;
+  overflow-x: auto;
+  gap: 10px;
+  padding: 1rem;
+  border: 1px solid #ddd;
+  background: #ffffff;
+  border-radius: var(--radius-lg);
+  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
+}
+
+.timeline-placeholder .step {
+  min-width: 100px;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  background: white;
+  border-radius: 8px;
+  text-align: center;
+  cursor: pointer;
+  font-size: 0.85rem;
+  transition: all 0.2s ease;
+  box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
+}
+.timeline-placeholder .step:hover {
+  background-color: #dbeafe;
+  font-weight: bold;
+  transform: scale(1.03);
+}
+.step.active {
+  background-color: #0d6efd !important;
+  color: white !important;
+  font-weight: bold;
+}
+
+/* ------------------- AUTOCOMPLETADO ------------------- */
+#sugerenciasFigura {
+  margin-top: 4px;
+  padding: 6px 0;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+  max-height: 160px;
+  overflow-y: auto;
+  position: absolute;
+  width: 100%;
+  z-index: 10;
+}
+#sugerenciasFigura button {
+  display: block;
+  width: 100%;
+  padding: 6px 12px;
+  font-size: 0.9rem;
+  border: none;
+  background: none;
+  text-align: left;
+  color: #333;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+#sugerenciasFigura button:hover {
+  background-color: #edf6ff;
+  color: #007bff;
+  font-weight: 500;
+}
+
+/* ------------------- VISTA PREVIA FIGURA ------------------- */
+#previewFigura img {
+  margin-top: 8px;
+  max-width: 100%;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  height: auto;
+}
+#previewFigura p {
+  font-size: 0.85rem;
+  color: #555;
+  margin-top: 4px;
+}
+
+/* ------------------- MULTIMEDIA ------------------- */
+#waveform {
+  width: 100%;
+  height: 100px;
+  margin-bottom: 10px;
+}
+#audioPlayer {
+  display: none;
+}
+
+/* ------------------- RESPONSIVO ------------------- */
+@media (max-width: 768px) {
+  #piscina {
+    min-height: 280px;
+  }
+
+  .timeline-placeholder .step {
+    min-width: 80px;
+    font-size: 0.75rem;
+  }
+}
diff --git a/public/js/login.js b/public/js/login.js
index d37e616..a161ee1 100644
--- a/public/js/login.js
+++ b/public/js/login.js
@@ -20,10 +20,11 @@ document.getElementById('loginForm').addEventListener('submit', async function (
   sessionStorage.setItem("role", data.role);
 
   if (data.role === "coach") {
-    window.location.href = "coach.html";
+    window.location.href = "equipoDisponibles.html";
   } else if (data.role === "athlete") {
     window.location.href = "atleta.html";
   } else {
     window.location.href = "ventanaPrincipal.html";
   }
+  
 });
diff --git a/public/js/piscina.js b/public/js/piscina.js
index 75051c8..0c99783 100644
--- a/public/js/piscina.js
+++ b/public/js/piscina.js
@@ -55,11 +55,16 @@ document.addEventListener('DOMContentLoaded', async () => {
         item.type = 'button';
         item.textContent = figura.nombre;
         item.onclick = () => {
-          inputFigura.value = figura.nombre;
-          inputFigura.title = `${figura.descripcion} (${figura.categoria})`;
-          sugerenciasBox.innerHTML = '';
-          mostrarPreview(figura);
-        };
+        inputFigura.value = figura.nombre;
+        inputFigura.title = `${figura.descripcion} (${figura.categoria})`;
+        sugerenciasBox.innerHTML = '';
+        mostrarPreview(figura);
+
+        const codigoInput = document.getElementById("codigoElemento");
+        if (codigoInput && figura.codigoElemento) {
+          codigoInput.value = figura.codigoElemento;
+        }
+};
         sugerenciasBox.appendChild(item);
       });
     });
@@ -73,23 +78,54 @@ document.addEventListener('DOMContentLoaded', async () => {
         <img src="catalog/figuras/${figura.imagen}" alt="${figura.nombre}" class="img-fluid rounded border" style="max-height:150px;" />
         <p class="mt-2">${figura.descripcion} <span class="badge bg-info">${figura.categoria}</span></p>
       `;
+        const codigoInput = document.getElementById("codigoElemento");
+  if (codigoInput && figura.codigoElemento) {
+    codigoInput.value = figura.codigoElemento;
+  }
     }
   } catch (err) {
-    console.warn('No se pudo cargar el catálogo FINA:', err);
+    console.warn('❌ No se pudo cargar el catálogo FINA:', err);
   }
-  const tipoPiscinaSelect = document.getElementById('tipoPiscina');
+const tipoPiscinaSelect = document.getElementById('tipoPiscina');
 
-    const medidasPiscina = {
-      olimpica: { width: 1000, height: 500 },
-      semiolimpica: { width: 750, height: 375 },
-      fosa: { width: 600, height: 600 }
-    };
+const medidasPiscina = {
+  olimpica: { width: 1000, height: 500 },
+  semiolimpica: { width: 750, height: 375 },
+  fosa: { width: 600, height: 600 }
+};
 
-    const tipoSeleccionado = rutina.tipoPiscina || 'olimpica';
-    tipoPiscinaSelect.value = tipoSeleccionado;
+let tipoSeleccionado = rutina.tipoPiscina || 'olimpica';
+tipoPiscinaSelect.value = tipoSeleccionado;
+let piscinaWidth = medidasPiscina[tipoSeleccionado].width;
+let piscinaHeight = medidasPiscina[tipoSeleccionado].height;
+tipoPiscinaSelect.addEventListener('change', async () => {
+  tipoSeleccionado = tipoPiscinaSelect.value;
+  piscinaWidth = medidasPiscina[tipoSeleccionado].width;
+  piscinaHeight = medidasPiscina[tipoSeleccionado].height;
 
-    const piscinaWidth = medidasPiscina[tipoSeleccionado].width;
-    const piscinaHeight = medidasPiscina[tipoSeleccionado].height;
+  // Actualiza dimensiones visuales
+  stage.width(piscinaWidth);
+  stage.height(piscinaHeight);
+  document.getElementById('piscina').style.width = `${piscinaWidth}px`;
+  document.getElementById('piscina').style.height = `${piscinaHeight}px`;
+  document.getElementById('piscinaContainer').style.width = `${piscinaWidth + 20}px`;
+
+  // Redibujar cuadrícula
+  layer.destroyChildren();
+  dibujarCuadricula(layer, piscinaWidth, piscinaHeight);
+  formacionActual.forEach(a => dibujarAtleta(a));
+
+  // Guardar en BD
+  try {
+    await fetch(`/api/rutinas/${rutinaId}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ tipoPiscina: tipoSeleccionado })
+    });
+  } catch (err) {
+    console.error('Error al actualizar tipoPiscina:', err);
+  }
+});
 
   // Escalas de conversión a metros
   const escalaX = 25 / piscinaWidth;
@@ -203,12 +239,17 @@ document.addEventListener('DOMContentLoaded', async () => {
     });
 
     const text = new Konva.Text({
-      x: atleta.x - 10,
-      y: atleta.y - 7,
+      x: atleta.x,
+      y: atleta.y,
       text: atleta.idPersonalizado,
       fontSize: 12,
-      fill: 'white'
+      fill: 'white',
+      fontStyle: 'bold',
+      align: 'center'
     });
+    text.offsetX(text.width() / 2);
+    text.offsetY(text.height() / 2);
+
 
     const figuraText = new Konva.Text({
       x: atleta.x - 25,
@@ -276,12 +317,16 @@ document.addEventListener('DOMContentLoaded', async () => {
     layer.add(coordText);
 
     if (atleta.direccion) {
-      const dir = new Konva.Line({
-        points: [atleta.direccion.x1, atleta.direccion.y1, atleta.direccion.x2, atleta.direccion.y2],
-        stroke: 'black',
-        strokeWidth: 2,
-        dash: [4, 4]
-      });
+    const linea = new Konva.Arrow({
+      points: [start.x, start.y, start.x, start.y],
+      stroke: 'black',
+      fill: 'black',
+      strokeWidth: 2,
+      pointerLength: 10,
+      pointerWidth: 10,
+      dash: [4, 4]
+  });
+
       layer.add(dir);
     }
 
@@ -301,12 +346,16 @@ document.addEventListener('DOMContentLoaded', async () => {
 
     const start = stage.getPointerPosition();
     const atleta = formacionActual[indexAtletaDireccion];
-    const linea = new Konva.Line({
-      points: [start.x, start.y, start.x, start.y],
-      stroke: 'black',
-      strokeWidth: 2,
-      dash: [4, 4]
-    });
+const linea = new Konva.Arrow({
+  points: [start.x, start.y, start.x, start.y],
+  stroke: 'black',
+  fill: 'black',
+  strokeWidth: 2,
+  pointerLength: 10,
+  pointerWidth: 10,
+  dash: [4, 4]
+});
+
     layer.add(linea);
 
     stage.on('mousemove.direccion', () => {
@@ -452,10 +501,10 @@ document.addEventListener('DOMContentLoaded', async () => {
     });
 
     if (res.ok) {
-      alert(editIndex === null ? 'Formación guardada' : 'Formación actualizada');
+      alert(editIndex === null ? '✅ Formación guardada' : '✏️ Formación actualizada');
       window.location.reload();
     } else {
-      alert('Error al guardar formación');
+      alert('❌ Error al guardar formación');
     }
   });
 
@@ -475,12 +524,12 @@ try {
 
   const json = await res.json();
   if (res.ok) {
-    console.log('Formaciones reordenadas');
+    console.log('✅ Formaciones reordenadas');
   } else {
-    console.warn('Error al guardar nuevo orden:', json);
+    console.warn('⚠️ Error al guardar nuevo orden:', json);
   }
 } catch (err) {
-  console.error('Error de red al reordenar:', err);
+  console.error('❌ Error de red al reordenar:', err);
 }
 
   }
@@ -520,7 +569,7 @@ try {
     btnEditarFormacion.className = 'btn btn-outline-secondary btn-sm';
     btnEditarFormacion.innerHTML = '✏ Editar formación';
 
-    btnGuardarFormacion.textContent = 'Guardar Formación';
+    btnGuardarFormacion.textContent = '💾 Guardar Formación';
     btnGuardarFormacion.classList.remove('btn-warning');
     btnGuardarFormacion.classList.add('btn-primary');
 
@@ -550,7 +599,7 @@ formaciones.forEach((f, i) => {
       inputFigura.title = '';
 
       btnEditarFormacion.className = 'btn btn-warning btn-sm d-inline-flex align-items-center gap-2';
-      btnEditarFormacion.innerHTML = 'En edición activa';
+      btnEditarFormacion.innerHTML = '🟡 En edición activa';
 
       btnGuardarFormacion.textContent = 'Actualizar Formación';
       btnGuardarFormacion.classList.remove('btn-primary');
@@ -561,41 +610,6 @@ formaciones.forEach((f, i) => {
   });
 
 
-const newWidth = medidasPiscina[tipoPiscinaSelect.value].width;
-const newHeight = medidasPiscina[tipoPiscinaSelect.value].height;
-
-    try {
-      const res = await fetch(`/api/rutinas/${rutinaId}/piscina`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ width: newWidth, height: newHeight })
-      });
-
-      if (!res.ok) throw new Error('No se pudo guardar en la base de datos');
-
-      stage.width(newWidth);
-      stage.height(newHeight);
-      divPiscina.style.width = `${newWidth}px`;
-      divPiscina.style.height = `${newHeight}px`;
-      document.getElementById('piscinaContainer').style.width = `${newWidth + 20}px`;
-
-      layer.destroyChildren();
-      dibujarCuadricula(layer, newWidth, newHeight);
-      formacionActual.forEach(a => dibujarAtleta(a));
-
-      Swal.fire({
-        icon: 'success',
-        title: 'Piscina actualizada',
-        text: 'El tamaño y la cuadrícula fueron actualizados correctamente.'
-      });
-    } catch (err) {
-      Swal.fire({
-        icon: 'error',
-        title: 'Error',
-        text: 'No se pudo actualizar la piscina en la base de datos.'
-      });
-    }
-  });
 
   // Observador de redimensionamiento para mantener la tarjeta ajustada
   const piscinaCard = document.querySelector('#piscinaContainer').closest('.card');
@@ -615,6 +629,10 @@ const wave = WaveSurfer.create({
   responsive: true
 });
 
+if (rutina.musicUrl) {
+  wave.load(rutina.musicUrl);
+}
+
 const playPauseBtn = document.getElementById('playPauseBtn');
 
 playPauseBtn.addEventListener('click', () => {
@@ -657,3 +675,5 @@ wave.on('audioprocess', (currentTime) => {
     }
   });
 });
+
+});
diff --git a/public/piscina.html b/public/piscina.html
index 181b50a..0b0140e 100644
--- a/public/piscina.html
+++ b/public/piscina.html
@@ -19,131 +19,137 @@
       <div class="ms-auto d-flex gap-4">
         <a href="coach.html" class="nav-link text-white">Inicializar Rutina</a>
         <a href="equipoDisponibles.html" class="nav-link text-white">Equipos Disponibles</a>
-        <a href="piscina.html" class="nav-link text-white">Piscina</a>
+        <a href="piscina.html" class="nav-link text-white active">Piscina</a>
       </div>
     </div>
   </nav>
 
   <!-- MAIN -->
-  <main class="px-5 my-4" style="max-width: 90%; margin: 0 auto;">
-    <!-- RUTINA -->
+  <main class="container-xl px-4 my-4">
     <section class="mb-4">
-      <h2 id="tituloRutina" class="fw-bold fs-3">Nombre de la Rutina</h2>
-      <p><strong>Tipo:</strong> <span id="tipoRutina" class="text-secondary">Cargando...</span></p>
-      <p><strong>Modalidad:</strong> <span id="modalidadRutina" class="text-secondary">Cargando...</span></p>
+      <h2 id="tituloRutina" class="fw-bold fs-2 mb-2">Editor de Formación</h2>
+      <div class="d-flex flex-wrap gap-3 small text-muted">
+        <div><strong>Tipo:</strong> <span id="tipoRutina">Cargando...</span></div>
+        <div><strong>Modalidad:</strong> <span id="modalidadRutina">Cargando...</span></div>
+      </div>
     </section>
 
-    <!-- FORMULARIOS Y CANVAS -->
-    <div class="row gx-4 gy-4 mb-5">
-      <!-- Formulario -->
-      <div class="col-lg-4">
-          <div class="card shadow-sm p-4">
-            <h5 class="fw-semibold mb-3">🎯 Agregar atleta</h5>
+    <div class="row gx-4 gy-4 align-items-start">
+      <!-- Formulario Atleta -->
+      <div class="col-lg-5 col-xl-4">
+        <div class="card p-4 h-100">
+          <h5 class="fw-semibold mb-3 text-primary">Agregar Atleta</h5>
 
-            <label for="selectAtleta" class="form-label">Seleccionar atleta:</label>
-            <select id="selectAtleta" class="form-select mb-3"></select>
+          <div class="mb-3">
+            <label for="selectAtleta" class="form-label">Seleccionar atleta</label>
+            <select id="selectAtleta" class="form-select"></select>
+          </div>
 
-            <label for="rolAtleta" class="form-label">Rol:</label>
-            <select id="rolAtleta" class="form-select mb-3">
+          <div class="mb-3">
+            <label for="rolAtleta" class="form-label">Rol</label>
+            <select id="rolAtleta" class="form-select">
               <option value="">Seleccionar rol</option>
               <option value="volador">Volador</option>
               <option value="pilar">Pilar</option>
               <option value="otro">Otro</option>
             </select>
+          </div>
 
-            <label for="idPersonalizado" class="form-label">ID personalizado:</label>
-            <input type="text" id="idPersonalizado" class="form-control mb-3" placeholder="Ej: A, 1, V2">
-
-            <label for="figura" class="form-label">Figura técnica:</label>
-            <input type="text" id="figura" class="form-control mb-2" placeholder="Ej: Barracuda, Flamingo..." autocomplete="off">
+          <div class="mb-3">
+            <label for="idPersonalizado" class="form-label">ID personalizado</label>
+            <input type="text" id="idPersonalizado" class="form-control" placeholder="Ej: A, 1, V2">
+          </div>
 
+          <div class="mb-3">
+            <label for="figura" class="form-label">Figura técnica</label>
+            <input type="text" id="figura" class="form-control" placeholder="Ej: Barracuda, Flamingo..." autocomplete="off">
             <div id="sugerenciasFigura" class="list-group position-relative"></div>
             <div id="previewFigura" class="text-center mt-3 mb-3"></div>
+          </div>
 
-            <label for="tipoElemento" class="form-label">Tipo de elemento:</label>
-            <select id="tipoElemento" class="form-select mb-3">
+          <div class="mb-3">
+            <label for="tipoElemento" class="form-label">Tipo de elemento</label>
+            <select id="tipoElemento" class="form-select">
               <option value="TRE">TRE</option>
               <option value="híbrido">Híbrido</option>
               <option value="transición" selected>Transición</option>
             </select>
-
-            <label for="codigoElemento" class="form-label">Código del elemento:</label>
-            <input type="text" id="codigoElemento" class="form-control mb-3" placeholder="Ej: TRE 1A, H4...">
-
-            <button id="btnAgregarAtleta" class="btn btn-success w-100 mt-3">➕ Añadir atleta</button>
           </div>
+
+          <div class="mb-4">
+            <label for="codigoElemento" class="form-label">Código del elemento</label>
+            <input type="text" id="codigoElemento" class="form-control" placeholder="Ej: TRE 1A, H4...">
+          </div>
+
+          <button id="btnAgregarAtleta" class="btn btn-primary w-100">Añadir Atleta</button>
         </div>
+      </div>
 
-      <!-- Piscina -->
-      <div class="col-lg-8">
-        <div class="card shadow-sm p-4">
-          <h5 class="fw-semibold mb-3">🏊 Vista de la Piscina</h5>
+      <!-- Piscina y Línea de Tiempo -->
+      <div class="col-lg-7 col-xl-8">
+        <div class="card p-4 h-100">
+          <h5 class="fw-semibold mb-3 text-primary">Piscina</h5>
 
-      <div class="mb-3">
-  <label for="tipoPiscina" class="form-label fw-semibold">Seleccionar tipo de piscina:</label>
-  <select id="tipoPiscina" class="form-select">
-    <option value="olimpica">Piscina Olímpica (50m x 25m)</option>
-    <option value="semiolimpica">Piscina Semiolímpica (25m x 12.5m)</option>
-    <option value="fosa">Fosa (20m x 20m)</option>
-  </select>
-</div>
+          <div class="mb-3">
+            <label for="tipoPiscina" class="form-label">Tipo de piscina</label>
+            <select id="tipoPiscina" class="form-select form-select-sm w-100" style="max-width: 280px;">
+              <option value="olimpica">Olímpica (50m x 25m)</option>
+              <option value="semiolimpica">Semiolímpica (25m x 12.5m)</option>
+              <option value="fosa">Fosa/Poza (20m x 20m)</option>
+            </select>
+          </div>
 
-
-          <!-- Canvas -->
-          <div id="piscinaContainer" class="border rounded p-2 mb-3">
+          <div id="piscinaContainer" class="border rounded p-2 mb-4" style="width: 100%; max-width: 100%; height: auto;">
             <div id="piscina"></div>
           </div>
 
-          <div class="text-end">
-            <button id="btnEditarFormacion" class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center gap-2" disabled>
-              ✏ Editar formación
-            </button>
+          <div class="mb-4">
+            <button id="btnEditarFormacion" class="btn btn-outline-secondary btn-sm" disabled>Editar formación</button>
           </div>
+
+          <label class="form-label fw-semibold">Línea de Tiempo</label>
+          <div id="lineaTiempo" class="timeline-placeholder d-flex flex-wrap gap-2"></div>
         </div>
       </div>
     </div>
 
-    <!-- Formaciones -->
-    <div class="row mb-4">
-      <div class="col-md-4 mb-3">
-        <label for="nombreFormacion" class="form-label">Nombre de la formación:</label>
-        <input type="text" id="nombreFormacion" class="form-control" />
+    <!-- Datos de Formación -->
+    <div class="card p-4 mt-4">
+      <h5 class="fw-semibold mb-3 text-primary">Datos de Formación</h5>
+      <div class="row gy-3">
+        <div class="col-md-4">
+          <label for="nombreFormacion" class="form-label">Nombre</label>
+          <input type="text" id="nombreFormacion" class="form-control" placeholder="Nombre de la formación">
+        </div>
+
+        <div class="col-md-4">
+          <label for="duracionFormacion" class="form-label">Duración (segundos)</label>
+          <input type="number" id="duracionFormacion" class="form-control" min="1" placeholder="Ej: 5">
+        </div>
+
+        <div class="col-md-4">
+          <label for="notasFormacion" class="form-label">Notas tácticas</label>
+          <textarea id="notasFormacion" class="form-control" rows="1" placeholder="Instrucciones, marcajes, etc."></textarea>
+        </div>
       </div>
-      <div class="col-md-4 mb-3">
-        <label for="duracionFormacion" class="form-label">Duración (segundos):</label>
-        <input type="number" id="duracionFormacion" class="form-control" min="1" placeholder="Ej: 5" />
-      </div>
-      <div class="col-md-4 mb-3">
-        <label for="notasFormacion" class="form-label">Notas tácticas:</label>
-        <textarea id="notasFormacion" class="form-control" rows="1"></textarea>
+
+      <div class="text-end mt-4">
+        <button id="btnGuardarFormacion" class="btn btn-primary">Guardar Formación</button>
       </div>
     </div>
 
-
-    <div class="text-center mb-4">
-      <button id="btnGuardarFormacion" class="btn btn-primary btn-lg px-5">💾 Guardar Formación</button>
+    <!-- Reproductor de audio -->
+    <div class="card p-4 mt-4">
+      <h5 class="fw-semibold mb-3 text-primary">Reproductor de Audio</h5>
+      <div id="waveform" class="mb-3"></div>
+      <div class="text-end">
+        <button id="playPauseBtn" class="btn btn-outline-secondary">Reproducir</button>
+      </div>
     </div>
-
-    <div id="waveform"></div>
-    <button id="playPauseBtn">▶ Reproducir</button>
-
-
-    <hr class="my-5" />
-
-    <!-- Línea de música anterior, sin wave -->
-    <section class="mb-4">
-      <audio id="audioPlayer" class="w-100" controls>
-        Tu navegador no soporta audio.
-      </audio>
-    </section>
-
-    <section>
-      <h4 class="mb-3 fw-semibold">🕒 Línea de tiempo</h4>
-      <div id="lineaTiempo" class="timeline-placeholder d-flex flex-wrap gap-2"></div>
-    </section>
   </main>
 
-  <!-- Script de interacción -->
+  <audio id="audioPlayer" class="d-none" controls></audio>
+
   <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
   <script src="js/piscina.js"></script>
 </body>