/* Demostración del hero · botón de pausa (js/showcase.js). Un clic en el botón pausa la demostración y otro la continúa; el clic sobre el video no
   hace nada: el portátil está inclinado en 3D y su caja es mayor que su dibujo, así que un clic sobre el video a veces caía en el vacío. El botón es
   plano, va fuera de las capas 3D (hijo directo del <figure>) y por encima de todas (z-index), ARRIBA del video, pegado a él y a la derecha (alineado con su borde derecho), en los 30 px de espacio que
   la figura deja para él (css/showcase.css). Tiene el mismo formato que los controles del chat (css/chat.css, .cd-ctl): círculo pequeño claro con borde,
   íconos de trazo fino, y se tiñe de azul al pasar el ratón y mientras la demostración está en pausa. Solo se muestra cuando el reproductor arrancó
   (data-player="on"); el atributo data-mode (auto | paused) decide qué ícono se ve. */
.demo-toggle {
  position: absolute;
  z-index: 6;
  top: 4px;
  right: clamp(8px, 2vw, 28px);
  display: none;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg2);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.showcase[data-player="on"] .demo-toggle { display: grid; }
.demo-toggle:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
/* El aro de enfoque solo aparece con el teclado (Tab), nunca al hacer clic con el ratón */
.demo-toggle:focus { outline: none; }
.demo-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.demo-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.demo-toggle .ic-play { display: none; fill: currentColor; stroke: none; }

/* En pausa: se ve el ícono de continuar y el botón queda teñido de azul para que se note que la demostración está detenida */
.showcase[data-mode="paused"] .ic-pause { display: none; }
.showcase[data-mode="paused"] .ic-play { display: block; }
.showcase[data-mode="paused"] .demo-toggle { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .demo-toggle { display: none !important; }
}