html, body { height: 100%; }
.app-shell { min-height: 100dvh; }
button.bo-btn {
  box-sizing: border-box;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: var(--weight-semi);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: pointer;
}
button.bo-btn[disabled] { opacity: 0.45; cursor: default; }
button.bo-btn-block { width: 100%; }
button.bo-chip { appearance: none; border-radius: var(--radius-pill); font-family: var(--font-sans); cursor: pointer; }
.bo-card { box-sizing: border-box; width: 100%; border-radius: var(--radius-card); }
.bo-sheet-scrim { position: fixed; inset: 0; z-index: 30; background: color-mix(in srgb, var(--surface-dark) 40%, transparent); display: flex; align-items: flex-end; overflow: hidden; }
.bo-sheet { background: var(--surface-card); border-radius: var(--radius-card) var(--radius-card) 0 0; width: 100%; padding: var(--space-4); padding-bottom: max(var(--space-4), env(safe-area-inset-bottom)); max-height: min(660px, 85dvh); min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.bo-sheet-etapa { border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; padding: var(--pad-sheet); padding-bottom: max(26px, env(safe-area-inset-bottom)); }
.bo-sheet-handle { display: flex; justify-content: center; padding: 4px 0 12px; cursor: grab; touch-action: none; }
.bo-sheet-handle::after { content: ""; width: 44px; height: 4px; border-radius: var(--radius-pill); background: var(--border-hairline); }
.bo-toast { position: fixed; left: var(--space-4); right: var(--space-4); background: var(--surface-dark); color: var(--text-on-dark); border-radius: var(--radius-pill); padding: var(--space-3); text-align: center; }
.bo-map { min-height: 240px; border-radius: var(--radius-card); position: relative; z-index: 0; isolation: isolate; overflow: hidden; }
.bo-map-chrome { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); background: var(--surface-card); z-index: 1; }
.bo-map-chrome-overlay { background: transparent; pointer-events: none; }
.bo-map-chrome-overlay .bo-map-action { pointer-events: auto; margin-left: auto; }
.bo-map-caption { flex: 1; font: var(--type-meta); color: var(--text-muted); }
.bo-map-chrome-overlay .bo-map-caption { color: var(--text-on-dark); text-shadow: 0 1px 2px rgba(28, 25, 23, .55); }
.bo-map-chrome-overlay .bo-btn { height: var(--control-2xs); min-height: var(--control-2xs); }
.leaflet-div-icon.bo-map-pin { background: transparent; border: 0; width: auto !important; height: auto !important; display: flex; align-items: center; gap: 6px; transform: translate(-50%, -100%); }
.bo-map-pin-time { background: var(--bo-device); color: var(--text-on-dark); border-radius: var(--radius-pill); padding: 4px 8px; font: var(--weight-semi) var(--text-small)/1 var(--font-sans); box-shadow: var(--shadow-float); }
.bo-map-pin-n { width: 22px; height: 22px; border-radius: var(--radius-pill); background: var(--accent-highlight); color: var(--accent-highlight-text); display: flex; align-items: center; justify-content: center; font: 400 12px/1 var(--font-sans); box-shadow: var(--shadow-float); }
.bo-progress { overflow: hidden; }
.bo-progress-indet > div { animation: bo-indet 1.1s ease-in-out infinite; }
@keyframes bo-indet {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(280%); }
}