<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Manejo de Errores en JavaScript</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-error { max-width: 480px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    .form-group { margin-bottom: 12px; }
    label { display: block; margin-bottom: 6px; font-weight: 600; color: #0f172a; font-size: 0.9rem; }
    input[type="text"] { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 6px; }
    button { padding: 9px 16px; background: #0284c7; color: white; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }
    button:hover { background: #0369a1; }
    .alerta { margin-top: 15px; padding: 12px; border-radius: 6px; font-size: 0.9rem; }
    .alerta-ok { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
    .alerta-error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
    .traza-log { font-family: monospace; font-size: 0.8rem; margin-top: 10px; color: #64748b; }
  </style>
</head>
<body>

  <div class="card-error">
    <h3 style="margin-top: 0; color: #0f172a;">Validador de Edad Académica</h3>

    <div class="form-group">
      <label for="campo-edad">Ingresa tu edad (entre 14 y 100 años):</label>
      <input type="text" id="campo-edad" placeholder="Ej: 24">
    </div>

    <button onclick="validarEdad()">Validar con try...catch</button>

    <div id="caja-resultado"></div>
    <div class="traza-log" id="log-consola"></div>
  </div>

  <script>
    function procesarEdad(valorTexto) {
      if (valorTexto === "") {
        throw new Error("El campo no puede estar vacío.");
      }

      const edad = Number(valorTexto);

      if (isNaN(edad)) {
        throw new Error(`"${valorTexto}" no es un número válido.`);
      }

      if (edad < 14) {
        throw new Error("Debes tener al menos 14 años para acceder a los cursos.");
      }

      if (edad > 100) {
        throw new Error("La edad ingresada supera el límite máximo permitido.");
      }

      return edad;
    }

    function validarEdad() {
      const input = document.getElementById('campo-edad');
      const resultado = document.getElementById('caja-resultado');
      const log = document.getElementById('log-consola');

      resultado.className = "alerta";
      log.textContent = "";

      try {
        // Bloque protegido
        const edadAprobada = procesarEdad(input.value.trim());

        resultado.className = "alerta alerta-ok";
        resultado.innerHTML = `✓ <strong>¡Registro Aceptado!</strong> Edad válida: ${edadAprobada} años.`;
        log.textContent = `[try]: Ejecución exitosa sin anomalías.`;

      } catch (error) {
        // Captura de excepción
        resultado.className = "alerta alerta-error";
        resultado.innerHTML = `✕ <strong>Excepción Capturada:</strong> ${error.message}`;
        log.textContent = `[catch]: ${error.name} -> ${error.message}`;

      } finally {
        log.textContent += ` | [finally]: Auditoría completada a las ${new Date().toLocaleTimeString()}.`;
      }
    }
  </script>

</body>
</html>