<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Tipos de Datos en JavaScript</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-tipos { max-width: 540px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 20px; }
    .tabla-inspeccion { width: 100%; border-collapse: collapse; margin-top: 15px; }
    .tabla-inspeccion th, .tabla-inspeccion td { border: 1px solid #e2e8f0; padding: 8px 12px; font-size: 0.9rem; }
    .tabla-inspeccion th { background: #f1f5f9; text-align: left; }
    .badge-tipo { font-weight: bold; color: #0284c7; font-family: monospace; }
  </style>
</head>
<body>

  <div class="card-tipos">
    <h3 style="margin-top: 0; color: #0f172a;">Evaluación Dinámica de Tipos</h3>
    <p style="font-size: 0.9rem; color: #64748b;">
      Los siguientes valores son evaluados automáticamente por el motor de JavaScript con <code>typeof</code>:
    </p>

    <table class="tabla-inspeccion">
      <thead>
        <tr>
          <th>Valor Evaluado</th>
          <th>Resultado de typeof</th>
        </tr>
      </thead>
      <tbody id="cuerpo-tabla">
        <!-- Generado dinámicamente -->
      </tbody>
    </table>

    <script>
      const muestras = [
        { valor: "¡Hola Mundo!", texto: '"¡Hola Mundo!"' },
        { valor: 2026, texto: '2026' },
        { valor: true, texto: 'true' },
        { valor: undefined, texto: 'undefined' },
        { valor: null, texto: 'null' },
        { valor: { curso: "JS", nivel: "Pro" }, texto: '{ curso: "JS" }' },
        { valor: ["HTML", "CSS", "JS"], texto: '["HTML", "CSS", "JS"]' }
      ];

      const tbody = document.getElementById('cuerpo-tabla');
      muestras.forEach(item => {
        const fila = document.createElement('tr');
        fila.innerHTML = `
          <td><code>${item.texto}</code></td>
          <td class="badge-tipo">${typeof item.valor}</td>
        `;
        tbody.appendChild(fila);
      });
    </script>
  </div>

</body>
</html>