<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Scope y Hoisting en JS</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-scope { max-width: 500px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    .terminal-box { background: #0f172a; color: #38bdf8; padding: 14px; border-radius: 6px; font-family: monospace; font-size: 0.9rem; margin-top: 15px; }
  </style>
</head>
<body>

  <div class="card-scope">
    <h3 style="margin-top: 0; color: #0f172a;">Prueba de Alcance de Bloque</h3>
    <p>Observa cómo la variable interna de un bloque no sobreescribe la variable exterior:</p>

    <button onclick="probarScope()" style="background: #0284c7; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: bold;">
      Ejecutar Prueba de Alcance
    </button>

    <div id="salida-scope" class="terminal-box">
      Presiona el botón para ver la ejecución...
    </div>

    <script>
      function probarScope() {
        let mensaje = "1. Variable en Scope Superior (Exterior)";
        let salida = mensaje + "\n";

        if (true) {
          // Esta variable 'mensaje' tiene Block Scope y es completamente independiente:
          let mensaje = "2. Variable interna dentro del bloque IF";
          salida += mensaje + "\n";
        }

        // Al salir del bloque, la variable original sigue intacta:
        salida += "3. Al salir del IF: " + mensaje;

        document.getElementById('salida-scope').innerText = salida;
      }
    </script>
  </div>

</body>
</html>