diff --git a/Practicas/Practicas JS/Examen MF0491_3/MF0491_3.pdf b/Practicas/Practicas JS/Examen MF0491_3/MF0491_3.pdf
new file mode 100644
index 0000000..410efb7
Binary files /dev/null and b/Practicas/Practicas JS/Examen MF0491_3/MF0491_3.pdf differ
diff --git a/Practicas/Practicas JS/Examen MF0491_3/index.html b/Practicas/Practicas JS/Examen MF0491_3/index.html
new file mode 100644
index 0000000..3644281
--- /dev/null
+++ b/Practicas/Practicas JS/Examen MF0491_3/index.html	
@@ -0,0 +1,283 @@
+<!-- *********************************** -->
+<!-- *********************************** -->
+<!-- **                               ** -->
+<!-- **    Examen práctico MF0491_3   ** -->
+<!-- **  Alumno: Marcos López Gómez   ** -->
+<!-- **                               ** -->
+<!-- *********************************** -->
+<!-- *********************************** -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
+    <title>Examen MF0491_3</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            text-decoration: none;
+            outline: none;
+            box-sizing: border-box;
+            font-family: 'Roboto', sans-serif;
+        }
+
+        body {
+            padding: 1em;
+        }
+
+        fieldset {
+            display: flex;
+            flex-direction: column;
+            gap: 0.4em;
+            padding: 1em;
+        }
+
+        .formControl {
+            display: inline-flex;
+            flex-direction: column;
+            margin-right: 1rem;
+        }
+
+        .formControl>input,
+        .formControl>select {
+            height: 2rem;
+            font-size: 1.2rem;
+            padding: 0.2rem;
+            border: 1px solid rgb(202, 207, 211);
+            border-radius: 0.3em;
+            background-color: transparent;
+            color: white;
+        }
+
+        .formControl>label {
+            font-size: 1em;
+            font-weight: bold;
+        }
+
+        legend {
+            padding: 0.2rem;
+            font-weight: bold;
+        }
+
+        textarea {
+            background-color: transparent;
+            color: white;
+            width: 100%;
+        }
+
+        button {
+            min-height: 2rem;
+            min-width: 2rem;
+            padding: 0.4em;
+            background-color: #0d6efd;
+            border: 0;
+            border-radius: 0.4em;
+            color: white;
+            font-size: 1.2em;
+        }
+
+        button:hover {
+            background-color: #0b5ed7;
+        }
+
+        #botonera {
+            display: flex;
+            flex-direction: row;
+            gap: 0.4rem;
+        }
+
+        input[type="file"] {
+            width: min-content;
+            padding: 0.1rem;
+        }
+
+        @media (max-width: 550px) {
+            #botonera {
+                flex-direction: column;
+            }
+
+            input[type="file"] {
+                width: 14rem;
+            }
+
+            input[type="file"]::file-selector-button {
+                width: 2rem;
+            }
+
+        }
+    </style>
+</head>
+
+<body>
+    <div>
+        <form id="formAlquiler"
+            style="display: flex; flex-direction: column; gap: 1em; min-width: min-content ;max-width: 600px; background-color: #9d2236; color:white; padding: 1em;">
+            <h1>Reserve su habitacion</h1>
+            <fieldset>
+                <legend>Datos de la reserva</legend>
+                <div>
+                    <div class="formControl">
+                        <label for="fechaEntrada">Fecha de entrada</label><input type="date" name="fechaEntrada"
+                            id="fechaEntrada">
+                    </div>
+                    <div class="formControl">
+                        <label for="fechaSalida">Fecha de Salida</label><input type="date" name="fechaSalida"
+                            id="fechaSalida">
+                    </div>
+                </div>
+                <div>
+                    <div class="formControl">
+                        <label for="tipoHabitacion">Tipo de habitación</label>
+                        <select name="tipoHabitacion" id="tipoHabitacion">
+                            <option value='simple' selected>Simple</option>
+                            <option value='doble'>Doble</option>
+                            <option value='triple'>Triple</option>
+                            <option value='suite'>Suite</option>
+                        </select>
+                    </div>
+                    <div class="formControl">
+                        <label for="tipoRegimen">Régimen de estancia</label>
+                        <select name="tipoRegimen" id="tipoRegimen">
+                            <option value='desayuno' selected>Desayuno</option>
+                            <option value='media_pension'>Media pensión</option>
+                            <option value='pension_completa'>Pensión Completa</option>
+                            <option value='todo_incluido'>Todo Incluido</option>
+                        </select>
+                    </div>
+                </div>
+                <div>
+                    <div class="formControl">
+                        <label for="costeEst">Coste de la estancia (Habitación + Comidas)</label>
+                        <input type="number" name="costeEst" id="costeEst" readonly>
+                    </div>
+                </div>
+
+                <div>
+                    <div class="formControl">
+                        <label for="diasSpa">Acceso al Spa, días</label>
+                        <input type="number" name="diasSpa" id="diasSpa">
+                    </div>
+                    <div class="formControl">
+                        <label for="diasGuia">Servicio de Guía, días</label>
+                        <input type="number" name="diasGuia" id="diasGuia">
+                    </div>
+                </div>
+                <div>
+                    <div class="formControl">
+                        <label for="costeTotalIva">Coste total (IVA incluido)</label>
+                        <input type="number" name="costeTotalIva" id="costeTotalIva" readonly>
+                    </div>
+                </div>
+
+            </fieldset>
+            <fieldset>
+                <legend>Datos personales</legend>
+                <div class="formControl">
+                    <label for="nombre">* Nombre</label>
+                    <input type="text" name="nombre" id="nombre" required>
+                </div>
+
+                <div class="formControl">
+                    <label for="email">* Correo Electronico</label>
+                    <input type="text" name="email" id="email" required>
+                </div>
+
+                <div class="formControl">
+                    <label for="telf">* Telefono</label>
+                    <input type="text" name="telf" id="telf" required>
+                </div>
+                <div class="formControl">
+                    <span>Check-in online (Opcional)</span>
+                    <label for="dni">* Adjunte fotocopia del DNI</label>
+                    <input type="file" name="dni" id="dni">
+                </div>
+                <div id="botonera">
+                    <div style="display: flex; flex-direction:column; gap: 0.4rem;">
+                        <button type="button" onclick="calculaTotales()">Calcular coste Total</button>
+                        <button type="button" onclick="limpiarForm()">Borrar</button>
+                        <button type="button" onclick="enviarForm()">Enviar la reserva</button>
+                    </div>
+
+                    <textarea id="resultado" rows="10"></textarea>
+                </div>
+            </fieldset>
+        </form>
+    </div>
+
+    <script>
+        function calculaTotales() {
+
+            const TIPOSHABITACIONES = { simple: 50, doble: 80, triple: 120, suite: 150 };
+            const TIPOSREGIMEN = { desayuno: 50, media_pension: 80, pension_completa: 120, todo_incluido: 150 };
+
+            const getValue = (id) => parseFloat(document.querySelector(`#${id}`).value);
+            const setValue = (id, value) => document.querySelector(`#${id}`).value = parseFloat(value).toFixed(2);
+
+            const fechaini = document.getElementById('fechaEntrada').value;
+            const fechafin = document.getElementById('fechaSalida').value;
+
+            const nDias = difFechasDias(fechaini, fechafin);
+
+            const pvpTipoHabitacion = TIPOSHABITACIONES[document.querySelector('#tipoHabitacion').value];
+            const pvpTipoRegimen = TIPOSREGIMEN[document.querySelector('#tipoRegimen').value];
+
+            const descXDias = nDias <= 5 ? 0 : nDias <= 10 ? 0.15 : 0.25;
+            const costeEstancia = nDias * (pvpTipoHabitacion + pvpTipoRegimen) * (1 - descXDias);
+
+            const diasSpa = getValue('diasSpa');
+            const diasGuia = getValue('diasGuia');
+
+            const pvpDiasSpa = diasSpa <= 5 ? diasSpa * 30 : diasSpa * 20;
+            const pvpDiasGuia = diasGuia <= 7 ? diasGuia * 50 : diasGuia * 40;
+
+            const totalSinIva = costeEstancia + pvpDiasSpa + pvpDiasGuia;
+            const totalConIva = (totalSinIva * 1.21).toFixed(2);
+
+            setValue('costeEst', costeEstancia);
+            setValue('costeTotalIva', totalConIva);
+
+            generaResumen(nDias, totalSinIva);
+        }
+
+        function generaResumen(nDias, totalSinIva) {
+            const setValue = (id, value) => document.querySelector(`#${id}`).value = value;
+
+            const txtresultado = document.querySelector('#resultado');
+            const diaCheckin = new Date(document.querySelector('#fechaEntrada').value);
+
+            const diasFaltantes = difFechasDias(new Date(), diaCheckin);
+            const pvpAnulacion = (totalSinIva * 0.20).toFixed(2);
+
+            const fechaSalida = new Date(diaCheckin);
+            fechaSalida.setDate(fechaSalida.getDate() + parseInt(nDias));
+
+            const fechaAnulacion = new Date(diaCheckin);
+            fechaAnulacion.setDate(fechaAnulacion.getDate() - 3);
+
+
+            const nombre = document.querySelector('#nombre').value;
+
+
+            const mensaje = `Hola ${nombre}\n` +
+                `Faltan ${diasFaltantes} días para tu viaje\n` +
+                `Tu fecha de regreso es ${new Date(fechaSalida).toLocaleDateString()}\n` +
+                `Puedes anular tu reserva hasta el: ${new Date(fechaAnulacion).toLocaleDateString()}\n` +
+                `El coste de la anulación será ${pvpAnulacion} euros`;
+
+            setValue('resultado', mensaje);
+        }
+
+        const difFechasDias = (fechaIni, fechaFin) => Math.ceil((new Date(fechaFin) - new Date(fechaIni)) / (1000 * 60 * 60 * 24));
+        const limpiarForm = () => document.getElementById("formAlquiler").reset();
+        const enviarForm = () => document.getElementById("formAlquiler").submit();
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Practicas/Practicas JS/Examen UF1842/EXAMEN_PRACTICO_UF1842_.html b/Practicas/Practicas JS/Examen UF1842/EXAMEN_PRACTICO_UF1842_.html
new file mode 100644
index 0000000..e3e65bb
--- /dev/null
+++ b/Practicas/Practicas JS/Examen UF1842/EXAMEN_PRACTICO_UF1842_.html	
@@ -0,0 +1,285 @@
+<!-- Examen práctico UF1842 JAVASCRIPT  -->
+<!Doctype html>
+<html>
+
+<head>
+	<meta charset="utf-8">
+	<title>Examen práctico UF1842 JAVASCRIPT</title>
+	<style>
+		@charset "UTF-8";
+
+		* {
+			margin: 0;
+			padding: 0;
+			list-style: none;
+			text-decoration: none;
+			border: none;
+			outline: none;
+		}
+
+		p {
+			margin-bottom: 10px;
+		}
+
+		form {
+			width: 80%;
+			min-width: 350px;
+			background-color: #9d2236;
+			border: 2px solid #000000;
+			padding: 10px;
+			box-sizing: border-box;
+			color: white;
+			font-size: 18px;
+			margin: auto;
+			margin-top: 20px;
+
+		}
+
+		fieldset {
+			background-color: #9d2236;
+			border: 2px solid #ffffff;
+			padding: 10px;
+			box-sizing: border-box;
+
+		}
+
+		#flex {
+			display: flex;
+			justify-content: space-between;
+		}
+
+		label {
+			margin-right: 10px;
+			margin-bottom: 5px;
+		}
+
+		input {
+			color: white;
+			background-color: #9d2236;
+			border: 2px solid white;
+			padding: 2px;
+		}
+
+		legend {
+			font-weight: bold;
+			font-size: 20px;
+			margin: 10px;
+		}
+
+		select,
+		option {
+			color: white;
+			background-color: #9d2236;
+			border: 2px solid white;
+			padding: 2px;
+		}
+
+		textarea {
+			background-color: #9d2236;
+			width: 100%;
+			height: 200px;
+			color: white;
+			border: 2px solid white;
+			padding: 10px;
+			box-sizing: border-box;
+			margin-left: 10px;
+		}
+
+		input[type=submit],
+		input[type=button],
+		input[type=reset] {
+			background-color: #9d2236;
+			color: white;
+			font-size: 16px;
+			font-weight: lighter;
+			margin-top: 10px;
+			padding: 5px;
+			border: 2px solid #000000;
+			border-radius: 5px;
+			box-shadow: 1px 2px 3px #fff;
+
+		}
+
+		/* Media query para pantallas de menos de 450 píxeles de ancho */
+		@media (max-width: 450px) {
+
+			label {
+				display: block;
+				margin-bottom: 5px;
+			}
+
+			#flex {
+				flex-wrap: wrap;
+				flex-direction: column-reverse;
+			}
+
+			textarea {
+				margin-left: 0px;
+			}
+	</style>
+	<script>
+		// Función obtener() que realizará la captación de datos,los cálculos y la escritura del mensaje de info
+
+		function obtener() {
+			// Declaro y obtengo el valor de las variables 
+			const noches = document.getElementById("noches").value;
+			const habitacion = document.getElementById("habitacion").value;
+			const regimen = document.getElementById("regimen").value;
+			const spa = document.getElementById("spa").value;
+			const guia = document.getElementById("guia").value;
+
+			//Cáculo extras (spa y guia)
+			let spaT;
+
+			if (spa > 5) {
+				spaT = spa * 20;
+			} else {
+				spaT = spa * 30;
+			}
+
+			let guiaT;
+
+			if (guia > 7) {
+				guiaT = guia * 40;
+			} else {
+				guiaT = guia * 50;
+			}
+
+			// Tipo habitación
+			let hotel;
+			if (habitacion === "simple") {
+				hotel = 50;
+			}
+
+			if (habitacion === "doble") {
+				hotel = 80;
+			}
+
+			if (habitacion === "triple") {
+				hotel = 120;
+			}
+
+			if (habitacion === "suite") {
+				hotel = 150;
+			}
+
+			//Tipo de regimen
+			let comidas;
+			if (regimen === "desayuno") {
+				comidas = 50;
+			}
+
+			if (regimen === "mediapension") {
+				comidas = 80;
+			}
+
+			if (regimen === "pensioncompleta") {
+				comidas = 120;
+			}
+
+			if (regimen === "todoincluido") {
+				comidas = 150;
+			}
+
+			// Gastos estancia hotel+comidas
+			const hotelT = hotel * noches;
+			const regimenT = comidas * noches;
+
+			const estancia = hotelT + regimenT;
+
+			// Descuento por larga estancia
+			let estanciaDescuento;
+			if (noches <= 4) {
+				estanciaDescuento = estancia;
+			} else if (noches >= 5 && noches <= 10) {
+				estanciaDescuento = estancia * 0.85;
+			} else if (noches >= 11) {
+				estanciaDescuento = estancia * 0.75;
+			}
+
+			//Envío el precio total sin IVA al formulario
+			document.getElementById("estancia").value = estanciaDescuento;
+
+			//Coste total con extras
+			const total = estanciaDescuento + spaT + guiaT;
+			const totalI = (total * 1.21).toFixed(2);
+			// Envío el precio con IVA al formulario
+			document.getElementById("total").value = totalI;
+			// Precio de anulación
+			const precioAnulacion = (total * 0.2).toFixed(2);
+
+
+			// Calcular días que faltan y fecha de regreso
+			const hoy = new Date().getTime();// Fecha de la reserva
+			const entrada = document.getElementById("fecha").valueAsNumber;
+			const dif = entrada - hoy;
+			const diasFaltan = dif / (1000 * 60 * 60 * 24);// Días que faltan
+			const regreso = entrada + (noches * 24 * 60 * 60 * 1000);//Fecha de regreso
+			const regresoF = new Date(regreso);// Obtener en UTC
+			const regresoP = regresoF.toLocaleDateString();//Pasar fecha a formato corto dd/mm/xxxx
+
+			const anulacion = entrada - (3 * 24 * 60 * 60 * 1000);//Fecha de anulación
+			const anulacionF = new Date(anulacion);
+			const anulacionP = anulacionF.toLocaleDateString();
+			//Mensaje de información
+			const frase = "Faltan " + (Math.ceil(diasFaltan)) + " días " + "para tu viaje" + "\n"
+				+ "Tu fecha de regreso es el " + regresoP + "\n"
+				+ "Puedes anular tu reserva hasta el día " + anulacionP + "\n"
+				+ "El coste de la anulación será de " + precioAnulacion + " euros";
+			//Enviar mensaje al formulario
+			document.getElementById("info").value = frase;
+		}
+
+	</script>
+	<link href="css/estilo.css" rel="stylesheet">
+
+</head>
+
+<body>
+
+	<h1>Reserva tu habitación</h1>
+	<div id="container">
+		<form action="gracias.html" method="post">
+			<p>Introduzca número de noches de su estancia <input type="number" name="noches" id="noches" value="0"
+					size="3"></p>
+			<p>Seleccione el tipo de habitación
+				<!-- Lista de selección -->
+				<select name="habitacion" id="habitacion">
+					<option value="simple" required>Simple</option>
+					<option value="doble">Doble</option>
+					<option value="triple">Triple</option>
+					<option value="suite">Suite</option>
+				</select>
+			</p>
+			<p>Seleccione el regimen de alojamiento
+				<!-- Lista de selección -->
+				<select name="regimen" id="regimen">
+					<option value="desayuno" required>Desayuno</option>
+					<option value="mediapension">Media pensión</option>
+					<option value="pensioncompleta">Pensión Completa</option>
+					<option value="todoincluido">Todo Incluido</option>
+				</select>
+			</p>
+			<br>
+			<p>Elige la fecha de entrada <input type="date" id="fecha"></p>
+			<br>
+			<p>Coste de la estancia (Habitación + Comidas) <input type="text" name="estancia" id="estancia"></p>
+			<p>Acceso al Spa, elija cuantos días <input type="number" name="spa" id="spa" value="0" size="3"></p>
+
+			<p>Servicio de guía turístico, elija cuantos días <input type="number" name="guia" id="guia" value="0"
+					size="3"></p>
+			<p>Coste total con IVA incluido <input type="text" name="total" id="total"></p>
+
+			<input type="button" value="Calcular coste total" onclick="obtener()"><input type="reset" name="limpiar"
+				value="Borrar" /><br>
+			<br>
+			<textarea name="info" id="info" rows="10" cols="60">Información de su viaje</textarea>
+		</form>
+	</div>
+
+
+	<br>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Practicas/Practicas JS/Examen UF1842/index optimizado.html b/Practicas/Practicas JS/Examen UF1842/index optimizado.html
index 1999f79..9fa0ad8 100644
--- a/Practicas/Practicas JS/Examen UF1842/index optimizado.html	
+++ b/Practicas/Practicas JS/Examen UF1842/index optimizado.html	
@@ -1,3 +1,11 @@
+<!-- *********************************** -->
+<!-- *********************************** -->
+<!-- **                               ** -->
+<!-- **    Examen práctico MF0491_3   ** -->
+<!-- **  Alumno: Marcos López Gómez   ** -->
+<!-- **                               ** -->
+<!-- *********************************** -->
+<!-- *********************************** -->
 <!DOCTYPE html>
 <html lang="en">
 
@@ -7,7 +15,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
-    <title>Examen UF1842</title>
+    <title>Examen MF0491_3</title>
     <style>
         * {
             margin: 0;
@@ -23,6 +31,13 @@
             padding: 1em;
         }
 
+        fieldset {
+            display: flex;
+            flex-direction: column;
+            gap: 0.4em;
+            padding: 1em;
+        }
+
         .formControl {
             display: inline-flex;
             flex-direction: column;
@@ -36,8 +51,8 @@
             padding: 0.2rem;
             border: 1px solid rgb(202, 207, 211);
             border-radius: 0.3em;
-            background-color: white;
-            color: rgb(17, 17, 17);
+            background-color: transparent;
+            color: white;
         }
 
         .formControl>label {
@@ -45,6 +60,16 @@
             font-weight: bold;
         }
 
+        legend {
+            padding: 0.2rem;
+            font-weight: bold;
+        }
+
+        textarea {
+            background-color: transparent;
+            width: 100%;
+        }
+
         button {
             min-height: 2rem;
             min-width: 2rem;
@@ -59,74 +84,128 @@
         button:hover {
             background-color: #0b5ed7;
         }
+
+        #botonera {
+            display: flex;
+            flex-direction: row;
+            gap: 0.4rem;
+        }
+
+        @media (max-width: 550px) {
+            #botonera {
+                flex-direction: column;
+            }
+
+            input[type="file"] {
+                width: 14rem;
+            }
+
+            input[type="file"]::file-selector-button {
+                width: 2rem;
+            }
+
+        }
     </style>
 </head>
 
 <body>
     <div>
-        <form id="formAlquiler" style="display: flex; flex-direction: column; gap: 1em; max-width: 400px;">
-            <h1>Alquiler de habitacion</h1>
-            <div class="formControl">
-                <label for="diasAlquiler">Introduzca el número de noches de su estancia</label>
-                <input type="number" name="diasAlquiler" id="diasAlquiler">
-            </div>
-            <div>
+        <form id="formAlquiler"
+            style="display: flex; flex-direction: column; gap: 1em; max-width: 600px; background-color: #9d2236; color:white; padding: 1em;">
+            <h1>Reserve su habitacion</h1>
+            <fieldset>
+                <legend>Datos de la reserva</legend>
+                <div>
+                    <div class="formControl">
+                        <label for="fechaEntrada">Fecha de entrada</label><input type="date" name="fechaEntrada"
+                            id="fechaEntrada">
+                    </div>
+                    <div class="formControl">
+                        <label for="fechaSalida">Fecha de Salida</label><input type="date" name="fechaSalida"
+                            id="fechaSalida">
+                    </div>
+                </div>
+                <div>
+                    <div class="formControl">
+                        <label for="tipoHabitacion">Tipo de habitación</label>
+                        <select name="tipoHabitacion" id="tipoHabitacion">
+                            <option value='simple' selected>Simple</option>
+                            <option value='doble'>Doble</option>
+                            <option value='triple'>Triple</option>
+                            <option value='suite'>Suite</option>
+                        </select>
+                    </div>
+                    <div class="formControl">
+                        <label for="tipoRegimen">Régimen de estancia</label>
+                        <select name="tipoRegimen" id="tipoRegimen">
+                            <option value='desayuno' selected>Desayuno</option>
+                            <option value='media_pension'>Media pensión</option>
+                            <option value='pension_completa'>Pensión Completa</option>
+                            <option value='todo_incluido'>Todo Incluido</option>
+                        </select>
+                    </div>
+                </div>
+                <div>
+                    <div class="formControl">
+                        <label for="costeEst">Coste de la estancia (Habitación + Comidas)</label>
+                        <input type="number" name="costeEst" id="costeEst" readonly>
+                    </div>
+                </div>
+
+                <div>
+                    <div class="formControl">
+                        <label for="diasSpa">Acceso al Spa, días</label>
+                        <input type="number" name="diasSpa" id="diasSpa">
+                    </div>
+                    <div class="formControl">
+                        <label for="diasGuia">Servicio de Guía, días</label>
+                        <input type="number" name="diasGuia" id="diasGuia">
+                    </div>
+                </div>
+                <div>
+                    <div class="formControl">
+                        <label for="costeTotalIva">Coste total (IVA incluido)</label>
+                        <input type="number" name="costeTotalIva" id="costeTotalIva" readonly>
+                    </div>
+                </div>
+
+            </fieldset>
+            <fieldset>
+                <legend>Datos personales</legend>
                 <div class="formControl">
-                    <label for="tipoHabitacion">Tipo de habitación</label>
-                    <select name="tipoHabitacion" id="tipoHabitacion">
-                        <option value='simple' selected>Simple</option>
-                        <option value='doble'>Doble</option>
-                        <option value='triple'>Triple</option>
-                        <option value='suite'>Suite</option>
-                    </select>
+                    <label for="nombre">* Nombre</label>
+                    <input type="text" name="nombre" id="nombre" required>
+                </div>
+
+                <div class="formControl">
+                    <label for="email">* Correo Electronico</label>
+                    <input type="text" name="email" id="email" required>
+                </div>
+
+                <div class="formControl">
+                    <label for="telf">* Telefono</label>
+                    <input type="text" name="telf" id="telf" required>
                 </div>
                 <div class="formControl">
-                    <label for="tipoRegimen">Régimen de estancia</label>
-                    <select name="tipoRegimen" id="tipoRegimen">
-                        <option value='desayuno' selected>Desayuno</option>
-                        <option value='media_pension'>Media pensión</option>
-                        <option value='pension_completa'>Pensión Completa</option>
-                        <option value='todo_incluido'>Todo Incluido</option>
-                    </select>
+                    <span>Check-in online (Opcional)</span>
+                    <label for="dni">* Adjunte fotocopia del DNI</label>
+                    <input type="file" name="dni" id="dni">
                 </div>
-            </div>
-            <div class="formControl">
-                <label for="fechaEntrada">Fecha de entrada</label><input type="date" name="fechaEntrada"
-                    id="fechaEntrada">
-            </div>
-            <div>
-                <div class="formControl">
-                    <label for="costeEst">Coste de la estancia (Habitación + Comidas)</label>
-                    <input type="number" name="costeEst" id="costeEst" readonly>
+                <div id="botonera">
+                    <div style="display: flex; flex-direction:column; gap: 0.4rem;">
+                        <button type="button" onclick="calculaTotales()">Calcular coste Total</button>
+                        <button type="button" onclick="limpiarForm()">Borrar</button>
+                        <button type="button" onclick="enviarForm()">Enviar la reserva</button>
+                    </div>
+
+                    <textarea id="resultado" rows="10"></textarea>
                 </div>
-            </div>
-            <div>
-                <div class="formControl">
-                    <label for="diasSpa">Acceso al Spa, días</label>
-                    <input type="number" name="diasSpa" id="diasSpa">
-                </div>
-                <div class="formControl">
-                    <label for="diasGuia">Servicio de Guía, días</label>
-                    <input type="number" name="diasGuia" id="diasGuia">
-                </div>
-            </div>
-            <div>
-                <div class="formControl">
-                    <label for="costeTotalIva">Coste total (IVA incluido)</label>
-                    <input type="number" name="costeTotalIva" id="costeTotalIva" readonly>
-                </div>
-            </div>
-            <div>
-                <button type="button" onclick="calculaTotales()">Calcular coste Total</button>
-                <button type="button" onclick="limpiarForm()">Borrar</button>
-            </div>
-            <textarea id="resultado" rows="10"></textarea>
+            </fieldset>
         </form>
     </div>
 
     <script>
         function calculaTotales() {
-            if (!datosCorrectos()) return;
 
             const TIPOSHABITACIONES = { simple: 50, doble: 80, triple: 120, suite: 150 };
             const TIPOSREGIMEN = { desayuno: 50, media_pension: 80, pension_completa: 120, todo_incluido: 150 };
@@ -134,7 +213,11 @@
             const getValue = (id) => parseFloat(document.querySelector(`#${id}`).value);
             const setValue = (id, value) => document.querySelector(`#${id}`).value = parseFloat(value).toFixed(2);
 
-            const nDias = getValue('diasAlquiler');
+            const fechaini = document.getElementById('fechaEntrada').value;
+            const fechafin = document.getElementById('fechaSalida').value;
+
+            const nDias = difFechasDias(fechaini, fechafin);
+
             const pvpTipoHabitacion = TIPOSHABITACIONES[document.querySelector('#tipoHabitacion').value];
             const pvpTipoRegimen = TIPOSREGIMEN[document.querySelector('#tipoRegimen').value];
 
@@ -156,21 +239,6 @@
             generaResumen(nDias, totalSinIva);
         }
 
-        function datosCorrectos() {
-            const getValue = (id) => parseFloat(document.querySelector(`#${id}`).value);
-
-            const diasAlquiler = getValue('diasAlquiler');
-            const diaCheckin = new Date(document.querySelector('#fechaEntrada').value);
-            const diasSpa = getValue('diasSpa');
-            const diasGuia = getValue('diasGuia');
-
-            if (diasAlquiler <= 0 || isNaN(diasAlquiler)) { alert('El número de días de alquiler debe ser superior a 0'); return false; }
-            if (diasSpa < 0 || diasSpa > diasAlquiler || isNaN(diasSpa)) { alert('El acceso al Spa no puede ser menor que cero o ser superior a los días de estancia'); return false; }
-            if (diasGuia < 0 || diasGuia > diasAlquiler || isNaN(diasGuia)) { alert('El servicio de guía no puede ser menor que cero o ser superior a los días de estancia'); return false; }
-            if (diaCheckin.getTime() < new Date().getTime() || isNaN(diaCheckin.getTime())) { alert('La fecha de entrada no puede ser inferior a la actual'); return false; }
-            return true;
-        }
-
         function generaResumen(nDias, totalSinIva) {
             const setValue = (id, value) => document.querySelector(`#${id}`).value = value;
 
@@ -186,7 +254,12 @@
             const fechaAnulacion = new Date(diaCheckin);
             fechaAnulacion.setDate(fechaAnulacion.getDate() - 3);
 
-            const mensaje = `Faltan ${diasFaltantes} días para tu viaje\n` +
+
+            const nombre = document.querySelector('#nombre').value;
+
+
+            const mensaje = `Hola ${nombre}\n` +
+                `Faltan ${diasFaltantes} días para tu viaje\n` +
                 `Tu fecha de regreso es ${new Date(fechaSalida).toLocaleDateString()}\n` +
                 `Puedes anular tu reserva hasta el: ${new Date(fechaAnulacion).toLocaleDateString()}\n` +
                 `El coste de la anulación será ${pvpAnulacion} euros`;
@@ -195,7 +268,8 @@
         }
 
         const difFechasDias = (fechaIni, fechaFin) => Math.ceil((new Date(fechaFin) - new Date(fechaIni)) / (1000 * 60 * 60 * 24));
-        const limpiarForm = ()=> document.getElementById("formAlquiler").reset();
+        const limpiarForm = () => document.getElementById("formAlquiler").reset();
+        const enviarForm = () => document.getElementById("formAlquiler").submit();
 
     </script>
 </body>
