<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Salidas en JavaScript</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; line-height: 1.6; background: #f8fafc; }
    .card-js { max-width: 520px; background: white; border: 1px solid #cbd5e1; border-radius: 10px; padding: 24px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
    .pantalla-resultado { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 16px; margin: 15px 0; font-size: 1.05rem; color: #1e3a8a; }
    .btn { background: #f59e0b; color: #0f172a; border: none; padding: 9px 15px; border-radius: 6px; font-weight: bold; cursor: pointer; margin-right: 8px; }
    .btn:hover { background: #d97706; color: white; }
  </style>
</head>
<body>

  <div class="card-js">
    <h3 style="margin-top: 0; color: #0f172a;">Interactividad con JavaScript</h3>
    
    <div id="caja-salida" class="pantalla-resultado">
      Texto inicial: Esperando que presiones un botón...
    </div>

    <button class="btn" onclick="probarInnerHTML()">
      1. Modificar con innerHTML
    </button>
    <button class="btn" onclick="probarAlert()" style="background: #0284c7; color: white;">
      2. Disparar Alert
    </button>
    <button class="btn" onclick="probarConsola()" style="background: #10b981; color: white;">
      3. Imprimir en Consola
    </button>

    <script>
      function probarInnerHTML() {
        const destino = document.getElementById('caja-salida');
        destino.innerHTML = "⚡ <strong>¡Hola Mundo desde Kilopolis Academia!</strong>";
      }

      function probarAlert() {
        alert("¡Hola Mundo! Este es un mensaje emergente nativo.");
      }

      function probarConsola() {
        console.log("¡Hola Mundo! Mensaje registrado en la consola de depuración.");
        alert("¡Mensaje enviado a la consola! Puedes abrir las herramientas de desarrollador (F12) para verlo.");
      }
    </script>
  </div>

</body>
</html>