/* ui/cycle-state.css — estado del ciclo del dispatcher (color/ícono por
   estado), compartido por ui/automation.html y ui/live.html.

   Extraído de ui/automation.html (docs/plans/dispatch-ux-estados.md, #742) —
   ver docs/research/panel-factory-estados-reales-del-ciclo.md (#1650, padre
   #1192/#922). Sin build step, servido estático vía GET /cycle-state.css
   (ui/server.mjs), mismo criterio que theme.css/ui-dialogs.js: no toca DB ni
   identidad, no pasa por el gate. Requiere que la página también linkee
   /theme.css (usa sus custom properties --red/--amber/--text-dim/etc). */

@keyframes cycle-state-spin  { from { transform:rotate(0deg) } to { transform:rotate(360deg) } }
@keyframes cycle-state-pulse { 0%,100% { opacity:1 } 50% { opacity:.4 } }

.cycle-state {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:24px; text-align:center; font-size:12px; border-radius:4px;
}
.cycle-state-icon { font-size:14px; }
.cycle-state--idle { color:var(--text-dim); }
.cycle-state--determinando {
  color:var(--amber); background:rgba(var(--amber-rgb), 0.07);
  border:1px solid rgba(var(--amber-rgb), 0.2);
}
.cycle-state--determinando .cycle-state-icon { display:inline-block; animation:cycle-state-spin 1.2s linear infinite; }
.cycle-state--running {
  color:var(--amber); background:rgba(var(--amber-rgb), 0.07);
  border:1px solid rgba(var(--amber-rgb), 0.2);
}
.cycle-state--running .cycle-state-icon { animation:cycle-state-pulse 1s infinite; }
.cycle-state--error {
  color:var(--red); background:rgba(var(--red-rgb), 0.08);
  border:1px solid var(--red-dim);
}
.cycle-state--pausado {
  color:var(--text-dim); background:rgba(var(--amber-rgb), 0.05);
  border:1px solid rgba(var(--amber-rgb), 0.15);
}
.cycle-state--warn {
  color:var(--amber); background:rgba(var(--amber-rgb), 0.07);
  border:1px solid rgba(var(--amber-rgb), 0.2);
}
/* "Sin señal del factory" (criterio 2026-08-10) — deliberadamente distinto
   de idle (sin caja) para no leerse como reposo normal: borde punteado,
   nunca color de alerta activa (ni amber ni red). */
.cycle-state--apagado {
  color:var(--text-faint); background:rgba(var(--text-faint-rgb), 0.08);
  border:1px dashed rgba(var(--text-faint-rgb), 0.35);
}
.cycle-micro-label {
  display:flex; align-items:center; gap:6px;
  font-size:10px; color:var(--text-faint); margin-bottom:6px;
}
.cycle-micro-label .dot {
  width:6px; height:6px; border-radius:50%; display:inline-block;
  background:var(--amber); box-shadow:0 0 6px var(--amber); animation:cycle-state-pulse 1s infinite;
}