.portal-tabs {
  display: inline-flex !important;
  gap: 0.4rem;
  padding: 0.28rem;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.16);
  flex: 0 0 auto;
  position: relative;
  z-index: 60;
}

.portal-tab {
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: var(--pill);
  padding: 0.55rem 1.15rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: #ffffff !important;
  background: rgba(0, 171, 235, 0.35) !important;
  cursor: pointer;
  white-space: nowrap;
  pointer-events: auto !important;
  position: relative;
  z-index: 61;
}

.portal-tab:hover {
  color: #fff !important;
  background: rgba(0, 171, 235, 0.55) !important;
}

.portal-tab.is-active {
  background: #ffffff !important;
  color: #001b5d !important;
  border-color: #ffffff !important;
}

.portal-tab[data-tab="escalas"]:not(.is-active) {
  background: #00abeb !important;
  color: #001b5d !important;
  border-color: #7ad7f5 !important;
}

.portal-install-link {
  flex: 0 0 auto;
  margin-left: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--pill);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff !important;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  display: none;
}

.portal-install-link.is-visible {
  display: inline-flex;
  align-items: center;
}

.portal-install-link:hover {
  background: rgba(255, 255, 255, 0.12);
}

.portal-panel {
  display: none !important;
  flex: 1 1 auto;
  min-height: 0;
}

.portal-panel.is-active {
  display: flex !important;
  flex-direction: column;
}

.portal-panel.is-active .app-main {
  flex: 1;
}

.app-shell:has(#portal-tabs:not([hidden])) {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

.app-header {
  position: relative;
  z-index: 50;
}

.portal-escalas-frame {
  width: 100%;
  height: calc(100vh - 4.5rem);
  height: calc(100dvh - 4.5rem);
  border: 0;
  background: var(--mist);
  flex: 1 1 auto;
}

@media (max-width: 820px) {
  .app-header {
    flex-wrap: wrap;
  }
  .portal-tabs {
    order: 3;
    width: 100%;
    justify-content: stretch;
  }
  .portal-tab {
    flex: 1;
  }
  .portal-install-link {
    order: 4;
  }
}