/* El Contraataque · Runtime Stability v59
 * One lightweight primary footer. No routing, observers or paint loops here.
 */

/* The normal application footer uses the original flex geometry. */
body:not(.auth-screen):not([data-screen="community"]):not([data-screen="communityPostDetail"]):not([data-screen="predictions"]):not([data-screen="draws"]):not([data-screen="drawDetail"]) .phone-frame > .bottom-nav {
  display: flex !important;
}

/* Dedicated modules own the bottom edge on these screens. */
body[data-screen="community"] .phone-frame > .bottom-nav,
body[data-screen="communityPostDetail"] .phone-frame > .bottom-nav,
body[data-screen="predictions"] .phone-frame > .bottom-nav,
body[data-screen="draws"] .phone-frame > .bottom-nav,
body[data-screen="drawDetail"] .phone-frame > .bottom-nav,
body.auth-screen .phone-frame > .bottom-nav {
  display: none !important;
}

.phone-frame > .bottom-nav,
body[data-theme="light"] .phone-frame > .bottom-nav {
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 60 !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 4.65rem !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0.32rem 0.24rem max(0.42rem, env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
  border-radius: 1.1rem 1.1rem 0 0 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 -0.45rem 1.4rem rgba(55, 42, 20, 0.07) !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

.phone-frame > .bottom-nav > button {
  position: relative !important;
  display: grid !important;
  grid-template-rows: 1.45rem 1rem !important;
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 3.55rem !important;
  height: auto !important;
  place-items: center !important;
  align-content: center !important;
  gap: 0.12rem !important;
  margin: 0 !important;
  padding: 0.22rem 0.08rem !important;
  border: 0 !important;
  overflow: visible !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent;
}

.phone-frame > .bottom-nav > button > .nav-icon {
  display: grid !important;
  width: 1.4rem !important;
  height: 1.4rem !important;
  place-items: center !important;
  overflow: visible !important;
  font-size: 1.16rem !important;
  line-height: 1 !important;
}

.phone-frame > .bottom-nav > button > span:last-child {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  overflow: visible !important;
  color: inherit;
  font-size: clamp(0.58rem, 2.3vw, 0.7rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/* Hidden menus are never allowed to become transparent hit layers. */
.phone-frame > .mobile-quick-menu[hidden] {
  display: none !important;
  pointer-events: none !important;
}

/* Keep the Más control clearly above the primary footer. */
.mobile-menu-fab {
  bottom: calc(5.05rem + env(safe-area-inset-bottom)) !important;
}

/* Mobile/PWA: footer belongs to the viewport. */
@media (max-width: 860px), (pointer: coarse) {
  .phone-frame > .bottom-nav,
  body[data-theme="light"] .phone-frame > .bottom-nav {
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
  }

  body:not(.auth-screen):not([data-screen="community"]):not([data-screen="communityPostDetail"]):not([data-screen="predictions"]):not([data-screen="draws"]):not([data-screen="drawDetail"]) .phone-frame > .mobile-content {
    padding-bottom: calc(5.05rem + env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: calc(5.35rem + env(safe-area-inset-bottom)) !important;
  }
}

/* Desktop simulator: footer remains inside the phone, never at viewport width. */
@media (min-width: 861px) and (pointer: fine) {
  .phone-frame > .bottom-nav,
  body[data-theme="light"] .phone-frame > .bottom-nav {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
  }

  .phone-frame > .bottom-nav > button > span:last-child {
    font-size: 0.62rem !important;
  }
}