/* ==========================================================================
   Demos de atajos de teclado
   --------------------------------------------------------------------------
   Iconito al costado de un atajo que, al pasar el cursor, muestra un GIF
   (o cualquier imagen) explicando cómo funciona. También sirve como enlace
   a un segmento de YouTube.

   Uso en Markdown (con md_in_html + attr_list ya activados):

     `Win+D`<span class="kbd-demo" markdown>
       [:material-play-circle:](https://youtu.be/VIDEO?t=90){ target=_blank }
       <img src="../assets/gifs/win-d.gif" alt="Demo Win+D" loading="lazy">
     </span>

   - El :material-play-circle: es el icono visible (clic → YouTube en el minuto).
   - El <img> es el GIF que aparece flotando al hacer hover.
   - Puedes incluir solo el enlace, solo el GIF, o ambos.
   ========================================================================== */

.kbd-demo {
  position: relative;
  display: inline-block;
  cursor: help;
  line-height: 1;
  vertical-align: middle;
}

/* El icono queda alineado con el texto del atajo */
.kbd-demo > a,
.kbd-demo > .twemoji {
  vertical-align: middle;
}

/* La imagen/GIF está oculta hasta el hover/focus */
.kbd-demo img {
  display: none;
  position: absolute;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  max-width: min(420px, 80vw);
  width: max-content;
  border-radius: 0.35rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  background: var(--md-default-bg-color);
  padding: 3px;
}

/* Se muestra al pasar el cursor o al enfocar con teclado (accesible) */
.kbd-demo:hover img,
.kbd-demo:focus-within img {
  display: block;
}