<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Alertas 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: 680px;">
    <h4 class="fw-bold text-dark mb-3">Mensajes Informativos en Kilopolis</h4>

    <!-- 1. Alerta de Éxito con Enlace -->
    <div class="alert alert-success d-flex align-items-center rounded-3 shadow-sm mb-3" role="alert">
      <span class="fs-4 me-3">✅</span>
      <div>
        <strong>¡Inscripción Exitosa!</strong> Puedes revisar tu horario de clases en el 
        <a class="alert-link">panel de estudiante</a>.
      </div>
    </div>

    <!-- 2. Alerta Descartable con botón de cierre -->
    <div class="alert alert-warning alert-dismissible fade show rounded-3 shadow-sm mb-3" role="alert">
      <h5 class="alert-heading fw-bold">⚠️ Atención: Mantenimiento Programado</h5>
      <p class="mb-2">
        La plataforma realizará una actualización de servidores el próximo domingo a las 02:00 AM UTC.
      </p>
      <hr>
      <p class="mb-0 small text-dark">
        Puedes descartar este aviso haciendo clic en la cruz de la derecha.
      </p>
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Cerrar"></button>
    </div>

    <!-- 3. Alerta de Error Crítico -->
    <div class="alert alert-danger rounded-3 shadow-sm" role="alert">
      <strong>Error 403:</strong> No cuentas con permisos de administrador para ejecutar esta operación.
    </div>
  </div>

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