/* The demo's way back to its menu (tools/demo-host.ts injects the link into each demo build's index.html). */
.cot-demo-nav {
  position: fixed;
  z-index: 2147483000;
  left: calc(12px + env(safe-area-inset-left));
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 0 16px 0 12px;
  border-radius: 999px;
  background: #1546c8;
  color: #fff;
  font:
    700 15px / 1 "Plus Jakarta Sans",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  text-decoration: none;
  box-shadow:
    0 2px 6px rgba(15, 26, 46, 0.25),
    0 8px 20px rgba(15, 26, 46, 0.2);
}
.cot-demo-nav:focus-visible {
  outline: 3px solid #ffb547;
  outline-offset: 3px;
}
.cot-demo-nav svg {
  flex: none;
}
/* Residentes: right, clear of the tab bar's height (its web build scrolls the document, the tab bar comes last) */
.cot-demo-nav--residente {
  left: auto;
  right: calc(12px + env(safe-area-inset-right));
  bottom: calc(96px + env(safe-area-inset-bottom));
}
/* Caseta with its navigation rail (guardStack, 900 px): inside the rail, above the guard's avatar */
@media (min-width: 900px) {
  .cot-demo-nav--guardias {
    left: 6px;
    bottom: calc(64px + env(safe-area-inset-bottom));
  }
}
@media print {
  .cot-demo-nav {
    display: none;
  }
}