/* a11y.css — accesibilidad mínima COMPARTIDA por el dashboard del PC y la PWA
 * móvil (port hermano, producto #10). Se carga la ÚLTIMA en las dos shells para
 * ganar a sus hojas sin !important salvo donde hace falta.
 *
 * 1. prefers-reduced-motion: las animaciones/transiciones se ACORTAN a ~0 en vez
 *    de quitarse (animation: none), así `animationend`/`transitionend` siguen
 *    disparando y ningún JS que espere al final de una animación se cuelga. Cubre
 *    el vuelo de cámara del 3D (.s3d-world) y los latidos de los badges. El
 *    avatar es canvas (JS): avatar.js mira la misma media query.
 * 2. :focus-visible: anillo cian al navegar con teclado. Solo en controles, no en
 *    campos de texto (esos ya muestran el cursor y un anillo al clicar cambiaría
 *    el composer de siempre).
 * 3. Color nunca como único canal: los estados llevan glifo o forma además de
 *    color (badges de hilo: glifo; puntos on/off: lleno vs anillo hueco).
 */

/* ── 1. movimiento reducido ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ── 2. foco visible con teclado ────────────────────────────────────────── */
:is(button, a[href], summary, select, [role="button"], [role="tab"], [tabindex]:not([tabindex="-1"]),
    input[type="checkbox"], input[type="radio"], input[type="range"]):focus-visible {
  outline: 2px solid #00e5ff !important;
  outline-offset: 2px;
}

/* ── 3. estado con glifo además de color ────────────────────────────────── */
.thread-badge-running::before,
.thread-badge-queued::before,
.thread-badge-done::before,
.thread-badge-failed::before,
.thread-badge-cancelled::before {
  margin-right: 3px;
  font-weight: 700;
}
/* La segunda `content` (con texto alternativo vacío) marca el glifo como
   decorativo para lectores de pantalla: la etiqueta ya dice el estado. */
.thread-badge-running::before   { content: "\25B6"; content: "\25B6" / ""; }   /* ▶ */
.thread-badge-queued::before    { content: "\2026"; content: "\2026" / ""; }   /* … */
.thread-badge-done::before      { content: "\2713"; content: "\2713" / ""; }   /* ✓ */
.thread-badge-failed::before    { content: "\2715"; content: "\2715" / ""; }   /* ✕ */
.thread-badge-cancelled::before { content: "\25A0"; content: "\25A0" / ""; }   /* ■ */

/* Puntos on/off (conexión del móvil, WhatsApp del PC): apagado = anillo hueco,
   encendido = lleno. Se distinguen sin ver el color. */
#status-dot.off {
  background: transparent !important;
  box-shadow: inset 0 0 0 2px var(--hud-red, #ff3b6b) !important;
}
.badge-dot.off {
  background: transparent !important;
  box-shadow: inset 0 0 0 2px #777 !important;
}