/* ═══════════════════════════════════════════════════════════════
   AsistPro Field · Mission Bridge · banner sticky en herramientas
   ═══════════════════════════════════════════════════════════════ */
#fm-banner {
  position: sticky; top: 0; z-index: 9990;
  background: linear-gradient(90deg, #061026 0%, #0A1740 50%, #14248F 100%);
  color: #fff;
  border-bottom: 2px solid #FF6B35;
  font-family: 'Funnel Sans', 'Inter', system-ui, -apple-system, sans-serif;
  box-shadow: 0 4px 14px rgba(10,23,64,0.25);
}
#fm-banner .fm-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  font-size: 13.5px; line-height: 1.3;
}
#fm-banner .fm-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #FF6B35;
  box-shadow: 0 0 0 0 rgba(255,107,53,.6);
  animation: fmPulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes fmPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,107,53,.6); }
  100% { box-shadow: 0 0 0 9px rgba(255,107,53,0); }
}
#fm-banner .fm-num {
  background: linear-gradient(135deg, #FF6B35, #C84518);
  color: #fff;
  font-family: ui-monospace, 'Geist Mono', monospace;
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  padding: 4px 10px; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(255,107,53,0.40);
}
#fm-banner .fm-label {
  color: rgba(255,255,255,0.65);
  font-size: 12.5px;
}
#fm-banner .fm-name {
  color: #FFD24A;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.005em;
}
#fm-banner .fm-spacer { flex: 1; min-width: 12px; }
#fm-banner .fm-back, #fm-banner .fm-done {
  font-family: inherit;
  font-size: 12px; font-weight: 700;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s;
  white-space: nowrap;
  border: 0;
}
#fm-banner .fm-back {
  background: transparent;
  color: rgba(255,255,255,0.78);
  border: 1px solid rgba(255,255,255,0.22);
}
#fm-banner .fm-back:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.40);
}
#fm-banner .fm-done {
  background: linear-gradient(135deg, #FF6B35, #FF8A5B);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255,107,53,0.35);
}
#fm-banner .fm-done:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255,107,53,0.50);
}
#fm-banner.done { background: linear-gradient(90deg, #14532d 0%, #166534 50%, #15803d 100%); border-bottom-color: #22C55E; }
#fm-banner.done .fm-num { background: linear-gradient(135deg, #22C55E, #15803d); box-shadow: 0 2px 6px rgba(34,197,94,0.40); }
#fm-banner.done .fm-name { color: #BBF7D0; }
#fm-banner.done .fm-done { background: linear-gradient(135deg, #22C55E, #16A34A); box-shadow: 0 4px 14px rgba(34,197,94,0.35); }

@media (max-width: 640px) {
  #fm-banner .fm-inner { padding: 8px 12px; gap: 8px; font-size: 12px; }
  #fm-banner .fm-label { display: none; }
  #fm-banner .fm-name { font-size: 12px; flex-basis: 100%; order: 4; }
  #fm-banner .fm-back { padding: 6px 10px; font-size: 11px; }
  #fm-banner .fm-done { padding: 6px 12px; font-size: 11.5px; }
  #fm-banner .fm-spacer { display: none; }
}

/* Pequeño nudge al body para que no quede el contenido tapado */
body.fm-active { padding-top: 0; }

@media (prefers-reduced-motion: reduce) {
  #fm-banner .fm-dot { animation: none; }
}