/* Barra inferior móvil: jerarquía más clara, marca roja y safe area iOS. */
@media (max-width: 760px) {
  body .bottom-nav {
    top: auto !important;
    bottom: 0 !important;
    height: calc(76px + env(safe-area-inset-bottom)) !important;
    min-height: calc(76px + env(safe-area-inset-bottom)) !important;
    max-height: calc(76px + env(safe-area-inset-bottom)) !important;
    padding: 0 0 env(safe-area-inset-bottom) !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, .97) !important;
    border: 0 !important;
    border-top: 1px solid rgba(217, 224, 230, .9) !important;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 26px rgba(16, 26, 37, .09) !important;
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
    pointer-events: none;
  }

  body .bottom-nav .bottom-nav-inner.nav-professional.nav-with-bank {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-content: stretch !important;
    width: 100% !important;
    height: 76px !important;
    min-width: 0 !important;
    min-height: 76px !important;
    gap: 0 !important;
    padding: 3px 3px 0 !important;
    overflow: hidden !important;
    pointer-events: none;
  }

  body .bottom-nav .bottom-nav-inner.nav-professional.nav-with-bank > button {
    position: relative !important;
    display: flex !important;
    flex: none !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 4px 1px 5px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: transparent !important;
    color: #7d8994 !important;
    font-size: 9px !important;
    font-weight: 720 !important;
    line-height: 1.1 !important;
    letter-spacing: .01em;
    white-space: nowrap;
    touch-action: manipulation;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    transition: color .16s ease, transform .16s ease;
  }

  body .bottom-nav .bottom-nav-inner.nav-professional.nav-with-bank > button::after {
    content: "";
    width: 13px;
    height: 3px;
    margin-top: 1px;
    border-radius: 999px;
    background: transparent;
  }

  body .bottom-nav .bottom-nav-inner.nav-professional.nav-with-bank > button > .nav-icon {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 31px !important;
    width: 35px !important;
    height: 31px !important;
    border-radius: 11px !important;
    color: currentColor !important;
    transition: background .16s ease, color .16s ease;
  }

  body .bottom-nav .bottom-nav-inner.nav-professional.nav-with-bank > button > .nav-icon svg {
    display: block;
    width: 22px !important;
    height: 22px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  body .bottom-nav .bottom-nav-inner.nav-professional.nav-with-bank > button > small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: inherit !important;
    font-size: 9px !important;
    font-weight: 750 !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis;
  }

  body .bottom-nav .bottom-nav-inner.nav-professional.nav-with-bank > button.active {
    color: #a91e35 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body .bottom-nav .bottom-nav-inner.nav-professional.nav-with-bank > button.active > .nav-icon {
    background: #fff0f2 !important;
    color: #bd263e !important;
  }

  body .bottom-nav .bottom-nav-inner.nav-professional.nav-with-bank > button.active::after {
    background: #bd263e;
  }

  body .bottom-nav .bottom-nav-inner.nav-professional.nav-with-bank > button:active {
    transform: scale(.96);
  }
}

@media (max-width: 360px) {
  body .bottom-nav .bottom-nav-inner.nav-professional.nav-with-bank > button > small {
    font-size: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .bottom-nav .bottom-nav-inner.nav-professional.nav-with-bank > button,
  body .bottom-nav .bottom-nav-inner.nav-professional.nav-with-bank > button > .nav-icon {
    transition: none;
  }
}

/* La Banca X: navegación deportiva oscura, sin modificar rutas ni iconos. */
@media (max-width: 760px) {
  body .bottom-nav {
    height: calc(82px + env(safe-area-inset-bottom)) !important;
    min-height: calc(82px + env(safe-area-inset-bottom)) !important;
    max-height: calc(82px + env(safe-area-inset-bottom)) !important;
    background: #121a27 !important;
    border-top: 1px solid #374454 !important;
    border-radius: 17px 17px 0 0 !important;
    box-shadow: 0 -9px 28px rgba(8, 15, 25, .24) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body .bottom-nav .bottom-nav-inner.nav-professional.nav-with-bank {
    height: 82px !important;
    min-height: 82px !important;
    padding: 6px 5px 3px !important;
    gap: 3px !important;
  }

  body .bottom-nav .bottom-nav-inner.nav-professional.nav-with-bank > button {
    height: 69px !important;
    min-height: 69px !important;
    max-height: 69px !important;
    gap: 4px !important;
    padding: 5px 1px 4px !important;
    border-radius: 13px !important;
    color: #aebac8 !important;
    font-weight: 800 !important;
  }

  body .bottom-nav .bottom-nav-inner.nav-professional.nav-with-bank > button > .nav-icon {
    flex-basis: 33px !important;
    width: 38px !important;
    height: 33px !important;
    border-radius: 10px !important;
  }

  body .bottom-nav .bottom-nav-inner.nav-professional.nav-with-bank > button > .nav-icon svg {
    width: 24px !important;
    height: 24px !important;
    stroke-width: 2 !important;
  }

  body .bottom-nav .bottom-nav-inner.nav-professional.nav-with-bank > button > small {
    color: inherit !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
  }

  body .bottom-nav .bottom-nav-inner.nav-professional.nav-with-bank > button.active {
    color: #fff !important;
    background: linear-gradient(180deg, rgba(188, 39, 65, .27), rgba(188, 39, 65, .1)) !important;
    box-shadow: inset 0 2px 0 #d43e58 !important;
  }

  body .bottom-nav .bottom-nav-inner.nav-professional.nav-with-bank > button.active > .nav-icon {
    color: #fff !important;
    background: linear-gradient(145deg, #b92743, #d5465e) !important;
    box-shadow: 0 3px 9px rgba(156, 25, 49, .35) !important;
  }

  body .bottom-nav .bottom-nav-inner.nav-professional.nav-with-bank > button.active::after {
    background: transparent !important;
  }

  body .bottom-nav .bottom-nav-inner.nav-professional.nav-with-bank > button:focus-visible {
    outline: 2px solid #ff7188 !important;
    outline-offset: -2px !important;
  }
}