<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Utilidades y Modo Oscuro Bootstrap 5</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light p-4">

  <div class="container" style="max-width: 650px;">
    <!-- Tarjeta adaptable con data-bs-theme -->
    <div id="cajaTema" class="card shadow-lg border-0 rounded-4 p-4 bg-white mb-4 transition">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <span class="badge bg-primary px-3 py-2 rounded-pill fw-bold">
          Bootstrap 5.3 Moderno
        </span>
        <button class="btn btn-outline-secondary btn-sm rounded-pill px-3" onclick="alternarTema()">
          🌓 Alternar Tema
        </button>
      </div>

      <h3 class="fw-bold mb-2">Utilidades y Custom Properties</h3>
      <p class="text-secondary mb-4">
        Esta tarjeta combina sombras suaves (<code>shadow-lg</code>), esquinas redondeadas (<code>rounded-4</code>), márgenes calculados (<code>mb-4</code>) y Flexbox nativo (<code>d-flex</code>).
      </p>

      <!-- Mini componentes de demostración -->
      <div class="d-flex gap-2 mb-4">
        <div class="p-3 bg-primary-subtle text-primary rounded-3 flex-fill text-center fw-bold">
          flex-fill 1
        </div>
        <div class="p-3 bg-success-subtle text-success rounded-3 flex-fill text-center fw-bold">
          flex-fill 2
        </div>
      </div>

      <button class="btn btn-primary py-2 rounded-pill fw-semibold shadow-sm" onclick="alert('¡Has completado el manual de Bootstrap 5!')">
        ¡Finalizar Manual de Bootstrap 5! &raquo;
      </button>
    </div>
  </div>

  <script>
    function alternarTema() {
      const caja = document.getElementById('cajaTema');
      const actual = caja.getAttribute('data-bs-theme');
      if (actual === 'dark') {
        caja.removeAttribute('data-bs-theme');
      } else {
        caja.setAttribute('data-bs-theme', 'dark');
      }
    }
  </script>

</body>
</html>