/* Controles fixos fora do cabeçalho, com espaço para a área segura do aparelho. */
:root {
  --demo-bottom-height: 88px;
}
body.demo-active .app-main {
  padding-bottom: calc(
    var(--demo-bottom-height) + 88px + env(safe-area-inset-bottom)
  );
  min-width: 0;
}
.demo-active #bottomNav {
  position: fixed !important;
  top: auto !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  width: min(420px, calc(100vw - 24px));
  margin: 0 !important;
  padding: 8px;
  z-index: 250;
  border-radius: 22px;
  box-shadow: 0 10px 35px #0009;
  background: #1a1f27f5;
}
.demo-active #bottomNav .bn-item {
  flex: 1;
  min-width: 0;
  width: auto;
  min-height: 52px;
}
.demo-active #bottomNav .bn-lbl {
  display: block;
  font-size: 10px;
}
body.demo-active #fabLancamentoRapido {
  position: fixed !important;
  left: auto !important;
  top: auto !important;
  right: calc(16px + env(safe-area-inset-right)) !important;
  bottom: calc(
    var(--demo-bottom-height) + 20px + env(safe-area-inset-bottom)
  ) !important;
  width: auto;
  min-width: 56px;
  height: 52px;
  padding: 12px 16px;
  gap: 8px;
  border-radius: 18px;
  z-index: 251;
  font:
    700 14px Inter,
    sans-serif;
  color: #14171c;
  box-shadow: 0 8px 28px #0008;
}
#fabLancamentoRapido .fab-ico {
  font-size: 24px;
  line-height: 1;
}
.demo-toast {
  bottom: calc(var(--demo-bottom-height) + 86px + env(safe-area-inset-bottom));
}
/* O destaque do tour precisa ultrapassar o backdrop mesmo dentro da sidebar. */
.demo-active .app-sidebar:has(.tour-highlight),
.demo-header:has(.tour-highlight) {
  z-index: 9001;
}
.demo-active #bottomNav.tour-highlight,
.demo-active #fabLancamentoRapido.tour-highlight {
  z-index: 9001;
}
.tour-card {
  bottom: calc(var(--demo-bottom-height) + 20px + env(safe-area-inset-bottom));
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100dvh - 140px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tour-card[data-high="true"] {
  bottom: calc(var(--demo-bottom-height) + 82px + env(safe-area-inset-bottom));
  max-height: calc(100dvh - 200px);
}
.tour-card-actions {
  flex-wrap: wrap;
}
.tour-dots {
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  max-width: 104px;
}
.tour-btn-next,
.tour-btn-skip {
  min-height: 44px;
}
.tour-btn-next {
  padding: 10px 16px;
}
@media (max-width: 700px) {
  /* Cada linha vira um cartão; todos os valores e controles ficam visíveis. */
  .demo-table-scroll {
    overflow: visible;
    min-width: 0;
  }
  .demo-table-scroll::before {
    display: none;
  }
  body.demo-active .demo-mobile-table {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto;
  }
  .demo-mobile-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .demo-mobile-table tbody {
    display: grid;
    width: 100%;
    gap: 12px;
  }
  .demo-mobile-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
    border: 1px solid #ffffff18;
    border-radius: 14px;
    background: #14171c;
    min-width: 0;
  }
  .demo-mobile-table tbody td {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .demo-mobile-table tbody td::before {
    content: attr(data-label);
    color: #94a3b8;
    font:
      600 11px/1.4 Inter,
      sans-serif;
  }
  .demo-mobile-table tbody td.demo-cell-actions {
    align-items: flex-end;
  }
  .demo-mobile-table tbody td.demo-cell-actions::before {
    display: none;
  }
  .demo-mobile-table input,
  .demo-mobile-table select,
  .demo-mobile-table textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    min-height: 44px;
    font-size: 16px !important;
    box-sizing: border-box;
  }
  .demo-mobile-table .del-btn {
    min-width: 44px;
    min-height: 44px;
  }
  #mainView,
  #mainView.solo {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .person-card,
  .shared-card,
  .obs-card,
  .resp-block,
  .block {
    min-width: 0;
    max-width: 100%;
  }
  .demo-active .app-main {
    width: 100%;
  }
  .demo-active .hero-bar {
    flex-wrap: wrap;
    min-width: 0;
  }
  .demo-active .hero-bar > * {
    min-width: 0;
    max-width: 100%;
  }
  .proj-tabela-wrap {
    overflow: visible;
  }
  .demo-active .modal-content {
    max-width: calc(100vw - 20px);
    box-sizing: border-box;
  }
}
@media (max-width: 380px) {
  .tour-dots {
    order: 3;
    max-width: none;
    flex-basis: 100%;
  }
  .demo-active #bottomNav .bn-lbl {
    font-size: 9px;
  }
  #fabLancamentoRapido .demo-quick-text {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tour-card,
  .tour-backdrop {
    animation: none;
  }
}

/* Ícones vetoriais consistentes, independentes da fonte de emojis do celular. */
.bn-ico svg,
.bn-ico-center svg {
  display: block;
  width: 24px;
  height: 24px;
}