<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Colores y Fondos 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: 800px;">
    <h3 class="fw-bold mb-3">Paleta Semántica en Kilopolis</h3>

    <!-- 1. Fondos Sólidos Principales -->
    <h5 class="text-muted small fw-bold text-uppercase mb-2">Fondos Sólidos (.bg-*)</h5>
    <div class="row g-2 text-white text-center mb-4">
      <div class="col-6 col-md-3">
        <div class="p-3 bg-primary rounded-3 shadow-sm fw-bold">Primary</div>
      </div>
      <div class="col-6 col-md-3">
        <div class="p-3 bg-success rounded-3 shadow-sm fw-bold">Success</div>
      </div>
      <div class="col-6 col-md-3">
        <div class="p-3 bg-danger rounded-3 shadow-sm fw-bold">Danger</div>
      </div>
      <div class="col-6 col-md-3">
        <div class="p-3 bg-dark rounded-3 shadow-sm fw-bold">Dark</div>
      </div>
    </div>

    <!-- 2. Fondos Suaves Modernos (.bg-*-subtle) -->
    <h5 class="text-muted small fw-bold text-uppercase mb-2">Fondos Suaves Modernos (.bg-*-subtle)</h5>
    <div class="row g-3">
      <div class="col-md-6">
        <div class="p-3 bg-primary-subtle text-primary border border-primary-subtle rounded-3">
          <strong class="d-block mb-1">Información de Curso (Primary Subtle)</strong>
          <small>Fondo azul claro óptimo para tarjetas informativas sin cansar la vista.</small>
        </div>
      </div>

      <div class="col-md-6">
        <div class="p-3 bg-success-subtle text-success border border-success-subtle rounded-3">
          <strong class="d-block mb-1">Pago Aprobado (Success Subtle)</strong>
          <small>Notificación de estado completado con estética contemporánea.</small>
        </div>
      </div>

      <div class="col-md-6">
        <div class="p-3 bg-warning-subtle text-warning-emphasis border border-warning-subtle rounded-3">
          <strong class="d-block mb-1">Mantenimiento Próximo (Warning Subtle)</strong>
          <small>Aviso preventivo con excelente contraste de lectura.</small>
        </div>
      </div>

      <div class="col-md-6">
        <div class="p-3 bg-danger-subtle text-danger border border-danger-subtle rounded-3">
          <strong class="d-block mb-1">Acceso Expirado (Danger Subtle)</strong>
          <small>Alerta crítica sin fondos estridentes de baja accesibilidad.</small>
        </div>
      </div>
    </div>
  </div>

</body>
</html>