/* ---------- Barra inferior (pantallas chicas) ---------- */
.step-dock { position: fixed; left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 60; display: none; align-items: center; gap: 6px; padding: 6px 6px 6px 6px; border-radius: 22px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--card) 88%, transparent); box-shadow: 0 18px 50px -14px rgba(0, 0, 0, .75); }
.step-dock:not([hidden]) { display: flex; }
@media (min-width: 1180px) and (min-height: 600px) {
  .step-dock { display: none !important; }
}
.dock-nav { flex: none; width: 44px; height: 44px; border-radius: 13px; border: 1px solid var(--line); background: var(--hair); color: var(--text); font-size: 12px; }
.dock-nav:disabled { opacity: .3; }
.dock-mid { flex: 1; min-width: 0; display: grid; gap: 6px; padding: 4px 8px; border: 0; background: transparent; text-align: left; }
.dock-text { display: grid; line-height: 1.15; min-width: 0; }
.dock-text b { font-size: 13.5px; color: var(--strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-text small { font: 500 9.5px/1.3 var(--mono); color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.dock-bar { display: block; height: 2px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.dock-bar i { display: block; height: 100%; width: 10%; border-radius: 2px; background: linear-gradient(90deg, var(--sky), var(--mint)); box-shadow: 0 0 8px var(--sky); transition: width .5s var(--ease); }