<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dropdowns y Acordeones 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;">
    <!-- 1. Menú Desplegable -->
    <div class="card shadow-sm border-0 rounded-4 p-4 bg-white mb-4">
      <div class="d-flex justify-content-between align-items-center">
        <div>
          <h5 class="fw-bold mb-1">Panel de Usuario</h5>
          <small class="text-muted">Menú desplegable con Popper</small>
        </div>

        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle rounded-pill px-4 fw-semibold" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            Acciones &raquo;
          </button>
          <ul class="dropdown-menu dropdown-menu-end shadow-sm border-0 rounded-3">
            <li><h6 class="dropdown-header">Gestión Kilopolis</h6></li>
            <li><a class="dropdown-item">Ver Mis Calificaciones</a></li>
            <li><a class="dropdown-item">Descargar Certificados</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item text-danger">Cerrar Sesión Segura</a></li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 2. Acordeón de Preguntas Frecuentes -->
    <div class="card shadow-sm border-0 rounded-4 p-4 bg-white">
      <h4 class="fw-bold text-dark mb-3">Preguntas Frecuentes (FAQ)</h4>

      <div class="accordion" id="faqKilopolis">
        <!-- Pregunta 1 -->
        <div class="accordion-item border-0 border-bottom">
          <h2 class="accordion-header">
            <button class="accordion-button fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
              ¿Se requiere instalar algún programa para usar el Sandbox?
            </button>
          </h2>
          <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqKilopolis">
            <div class="accordion-body text-secondary small">
              No necesitas instalar nada. Todo el código de Bootstrap 5, CSS3, JavaScript y PHP se procesa de forma nativa directamente en la nube de Kilopolis.
            </div>
          </div>
        </div>

        <!-- Pregunta 2 -->
        <div class="accordion-item border-0">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
              ¿Por qué Bootstrap 5 eliminó la dependencia de jQuery?
            </button>
          </h2>
          <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqKilopolis">
            <div class="accordion-body text-secondary small">
              Para mejorar el rendimiento de carga y velocidad de ejecución, aprovechando las capacidades modernas de JavaScript ES6+ soportadas por todos los navegadores actuales.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

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