<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Modales 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: 600px;">
    <div class="card shadow-sm border-0 rounded-4 p-4 bg-white text-center">
      <h4 class="fw-bold text-dark mb-2">Diálogos Emergentes con Bootstrap 5</h4>
      <p class="text-secondary small mb-4">
        Presiona el botón inferior para abrir la ventana modal centrada con capa de fondo estática:
      </p>

      <!-- Botón que activa el modal -->
      <button type="button" class="btn btn-primary px-4 py-2 rounded-pill fw-semibold shadow-sm" data-bs-toggle="modal" data-bs-target="#modalKilopolis">
        Abrir Ventana Modal &raquo;
      </button>
    </div>
  </div>

  <!-- Componente Modal de Bootstrap -->
  <div class="modal fade" id="modalKilopolis" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modalTitulo" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content border-0 shadow rounded-4 overflow-hidden">
        <div class="modal-header bg-primary text-white p-3">
          <h5 class="modal-title fw-bold" id="modalTitulo">
            🏛️ Certificación Kilopolis Academia
          </h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
        </div>
        <div class="modal-body p-4 text-start">
          <p class="mb-2 text-dark">
            <strong>¡Felicitaciones por completar tus lecciones!</strong>
          </p>
          <p class="text-secondary small mb-0">
            Este modal está configurado con <code>data-bs-backdrop="static"</code>, lo que significa que no se cerrará si haces clic por accidente en el fondo oscuro exterior. Debes presionar un botón para interactuar.
          </p>
        </div>
        <div class="modal-footer bg-light p-3">
          <button type="button" class="btn btn-outline-secondary rounded-pill px-3" data-bs-dismiss="modal">
            Cerrar Diálogo
          </button>
          <button type="button" class="btn btn-primary rounded-pill px-4 fw-semibold" onclick="alert('¡Certificado emitido con éxito!');" data-bs-dismiss="modal">
            Descargar Certificado
          </button>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>