<!-- INICIO: Modales accesibles -->
<section id="dialogos" class="panel demo-card" data-component="dialogos">
  <div class="panel-heading"><h2>Modales accesibles</h2></div>
  <div class="demo-row">
    <button class="btn lime" type="button" data-open-dialog="demo-info-dialog">Abrir modal</button
    ><button class="btn outline" type="button" data-open-dialog="demo-confirm-dialog">
      Confirmación</button
    ><button class="btn outline" type="button" data-demo-action="Cambios guardados correctamente">
      Mostrar notificación
    </button>
  </div>
  <dialog id="demo-info-dialog" class="demo-dialog" aria-labelledby="demo-info-title">
    <form method="dialog"><button class="close" aria-label="Cerrar">×</button></form>
    <p class="eyebrow">UN MOMENTO PARA REVISAR</p>
    <h2 id="demo-info-title">Todo, en su lugar.</h2>
    <p class="muted">
      Este diálogo usa el elemento nativo dialog. Mantiene el foco dentro y permite cerrar con
      Escape.
    </p>
    <form method="dialog" class="mt-5"><button class="btn lime">Entendido</button></form>
  </dialog>
  <dialog id="demo-confirm-dialog" class="demo-dialog" aria-labelledby="demo-confirm-title">
    <p class="eyebrow">CONFIRMACIÓN</p>
    <h2 id="demo-confirm-title">¿Guardar estos cambios?</h2>
    <p class="muted">Una confirmación de ejemplo; no modifica datos reales.</p>
    <form method="dialog" class="demo-row mt-5">
      <button class="btn outline" value="cancel">Cancelar</button
      ><button class="btn lime" value="confirm">Confirmar</button>
    </form>
  </dialog>
</section>
<!-- FIN: Modales accesibles -->

<!-- INICIO: Alertas y mensajes -->
<section id="alertas" class="panel demo-card" data-component="alertas">
  <div class="panel-heading"><h2>Alertas y mensajes</h2></div>
  <div class="demo-alert success" role="status">
    <strong>Todo listo.</strong> Tus cambios se guardaron.
  </div>
  <div class="demo-alert warning">
    <strong>Atención.</strong> Tu presupuesto está cerca del límite.
  </div>
  <div class="demo-alert danger" role="alert">
    <strong>Revisa los datos.</strong> Hay un campo pendiente.
  </div>
</section>
<!-- FIN: Alertas y mensajes -->

<!-- INICIO: Pestañas y acordeones -->
<section id="tabs-acordeon" class="panel demo-card" data-component="tabs-acordeon">
  <div class="panel-heading"><h2>Pestañas y acordeones</h2></div>
  <div class="demo-tabs" role="tablist" aria-label="Información del proyecto">
    <button
      id="tab-resumen"
      role="tab"
      aria-selected="true"
      aria-controls="panel-resumen"
      tabindex="0"
    >
      Resumen</button
    ><button
      id="tab-detalles"
      role="tab"
      aria-selected="false"
      aria-controls="panel-detalles"
      tabindex="-1"
    >
      Detalles</button
    ><button
      id="tab-equipo"
      role="tab"
      aria-selected="false"
      aria-controls="panel-equipo"
      tabindex="-1"
    >
      Equipo
    </button>
  </div>
  <div id="panel-resumen" class="demo-tab-panel" role="tabpanel" aria-labelledby="tab-resumen">
    <h3>Una vista de conjunto.</h3>
    <p class="muted">Aquí puedes mostrar los datos principales del proyecto.</p>
  </div>
  <div
    id="panel-detalles"
    class="demo-tab-panel"
    role="tabpanel"
    aria-labelledby="tab-detalles"
    hidden
  >
    <h3>Los detalles hacen la diferencia.</h3>
    <p class="muted">Espacio para fechas, documentos y configuración.</p>
  </div>
  <div id="panel-equipo" class="demo-tab-panel" role="tabpanel" aria-labelledby="tab-equipo" hidden>
    <h3>Cada persona cuenta.</h3>
    <p class="muted">Miembros, responsables y colaboradores.</p>
  </div>
  <details class="demo-accordion">
    <summary>¿Puedo copiar estos componentes?</summary>
    <p>Sí. Copia su sección HTML y conserva el CSS y el comportamiento asociado.</p>
  </details>
  <details class="demo-accordion">
    <summary>¿Necesito otra librería?</summary>
    <p>Estos componentes usan HTML nativo y JavaScript sencillo.</p>
  </details>
</section>
<!-- FIN: Pestañas y acordeones -->