<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Botones en 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;">
    <div class="card shadow-sm border-0 rounded-4 p-4 bg-white mb-4">
      <h4 class="fw-bold text-dark mb-3">Catálogo de Botones en Kilopolis</h4>

      <!-- 1. Botones Sólidos -->
      <h6 class="text-muted small fw-bold text-uppercase mb-2">Botones Sólidos</h6>
      <div class="d-flex flex-wrap gap-2 mb-3">
        <button class="btn btn-primary" onclick="alert('Acción primaria')">Primario</button>
        <button class="btn btn-success" onclick="alert('Acción completada')">Éxito</button>
        <button class="btn btn-danger" onclick="alert('Acción de riesgo')">Peligro</button>
        <button class="btn btn-dark" onclick="alert('Modo oscuro')">Oscuro</button>
      </div>

      <!-- 2. Botones de Contorno (Outline) -->
      <h6 class="text-muted small fw-bold text-uppercase mb-2">Variantes Outline (.btn-outline-*)</h6>
      <div class="d-flex flex-wrap gap-2 mb-4">
        <button class="btn btn-outline-primary">Outline Azul</button>
        <button class="btn btn-outline-success">Outline Verde</button>
        <button class="btn btn-outline-danger">Outline Rojo</button>
      </div>

      <!-- 3. Grupo de Botones (.btn-group) -->
      <h6 class="text-muted small fw-bold text-uppercase mb-2">Grupo de Opciones (.btn-group)</h6>
      <div class="btn-group mb-4" role="group">
        <button type="button" class="btn btn-primary active">Día</button>
        <button type="button" class="btn btn-outline-primary">Semana</button>
        <button type="button" class="btn btn-outline-primary">Mes</button>
      </div>

      <!-- 4. Botón de Bloque Completo -->
      <div class="d-grid">
        <button class="btn btn-primary btn-lg rounded-pill fw-semibold shadow-sm" onclick="alert('¡Inscripción confirmada!')">
          Inscribirse al Curso Completo &raquo;
        </button>
      </div>
    </div>
  </div>

</body>
</html>