/* =========================================================
   FINAL NAV FIX - V19
   Objetivo:
   - Botonera SIN cajas, SIN marcos, SIN fondos.
   - Solo icono + texto.
   - Línea debajo del item activo.
   - Reservar desaparece dentro del calendario.
   - Fondo lancha_aesthetic_hd con movimiento visible en loop.
   ========================================================= */

/* Fondo con movimiento real */
html body .hero {
  overflow: hidden !important;
  isolation: isolate !important;
}

html body .hero-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: -3 !important;
  overflow: hidden !important;
  background: none !important;
  background-image: none !important;
  transform: none !important;
  animation: none !important;
}

html body .hero-bg::before {
  content: "" !important;
  position: absolute !important;
  inset: -12% !important;
  display: block !important;
  background-image: url("../img/lancha_aesthetic_hd.png") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  transform-origin: center center !important;
  animation: yachtBgFloatFinal 16s ease-in-out infinite alternate !important;
  will-change: transform !important;
}

html body .hero-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  background:
    linear-gradient(180deg, rgba(2, 16, 29, .18) 0%, rgba(2, 16, 29, .08) 36%, rgba(2, 16, 29, .72) 100%),
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.08), transparent 26%) !important;
}

@keyframes yachtBgFloatFinal {
  0%   { transform: translate3d(-2.2%, -2.0%, 0) scale(1.045); }
  33%  { transform: translate3d(1.6%, -3.8%, 0) scale(1.085); }
  66%  { transform: translate3d(-1.2%, 1.4%, 0) scale(1.065); }
  100% { transform: translate3d(2.0%, 3.0%, 0) scale(1.10); }
}

/* Contraste automático simple */
html body {
  --final-nav-color: rgba(255,255,255,.94);
  --final-nav-muted: rgba(255,255,255,.74);
  --final-nav-line: rgba(255,255,255,.94);
}

html body[data-active-view="reservas"],
html body[data-active-view="tarifas"],
html body[data-active-view="ubicacion"],
html body[data-active-view="faq"] {
  --final-nav-color: rgba(6,21,37,.94);
  --final-nav-muted: rgba(6,21,37,.70);
  --final-nav-line: rgba(6,21,37,.94);
}

/* Contenedor general: invisible */
html body nav#navLinks.app-tabbar {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
  transform: translateX(-50%) !important;
  width: min(720px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  height: auto !important;
  z-index: 9999 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
}

/* Grilla del menú: invisible */
html body nav#navLinks.app-tabbar > .app-tabbar-shell {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: end !important;
  justify-items: center !important;
  gap: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 auto !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  pointer-events: auto !important;
}

/* Mata cualquier pseudoelemento de versiones anteriores */
html body nav#navLinks.app-tabbar::before,
html body nav#navLinks.app-tabbar::after,
html body nav#navLinks.app-tabbar > .app-tabbar-shell::before,
html body nav#navLinks.app-tabbar > .app-tabbar-shell::after,
html body nav#navLinks.app-tabbar > .app-tabbar-shell > a::before,
html body nav#navLinks.app-tabbar > .app-tabbar-shell > a::after {
  content: none !important;
  display: none !important;
}

/* Ítems: SOLO texto + ícono */
html body nav#navLinks.app-tabbar > .app-tabbar-shell > a,
html body nav#navLinks.app-tabbar > .app-tabbar-shell > a:not(:last-child),
html body nav#navLinks.app-tabbar > .app-tabbar-shell > a:not(:last-of-type),
html body nav#navLinks.app-tabbar > .app-tabbar-shell > a:not(.app-center-reserve),
html body nav#navLinks.app-tabbar > .app-tabbar-shell > a.app-center-reserve {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  padding: 0 4px 12px !important;
  margin: 0 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  color: var(--final-nav-color) !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  text-decoration: none !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: .10em !important;
  font-size: clamp(.48rem, 1.2vw, .68rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: normal !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

html body nav#navLinks.app-tabbar > .app-tabbar-shell > a:nth-of-type(1) { grid-column: 1 !important; }
html body nav#navLinks.app-tabbar > .app-tabbar-shell > a:nth-of-type(2) { grid-column: 2 !important; }
html body nav#navLinks.app-tabbar > .app-tabbar-shell > a:nth-of-type(3) { grid-column: 3 !important; }
html body nav#navLinks.app-tabbar > .app-tabbar-shell > a:nth-of-type(4) { grid-column: 4 !important; }
html body nav#navLinks.app-tabbar > .app-tabbar-shell > a:nth-of-type(5) { grid-column: 5 !important; }

/* Icono limpio */
html body nav#navLinks.app-tabbar .tab-icon,
html body nav#navLinks.app-tabbar a.app-center-reserve .tab-icon {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  color: currentColor !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  font-size: .84rem !important;
  line-height: 1 !important;
}

/* Línea debajo del activo/hover, y nada más */
html body nav#navLinks.app-tabbar > .app-tabbar-shell > a:hover,
html body nav#navLinks.app-tabbar > .app-tabbar-shell > a.is-active,
html body nav#navLinks.app-tabbar > .app-tabbar-shell > a.app-center-reserve:hover,
html body nav#navLinks.app-tabbar > .app-tabbar-shell > a.app-center-reserve.is-active {
  color: var(--final-nav-color) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

html body nav#navLinks.app-tabbar > .app-tabbar-shell > a span:last-child {
  position: relative !important;
  color: currentColor !important;
}

html body nav#navLinks.app-tabbar > .app-tabbar-shell > a.is-active span:last-child::after,
html body nav#navLinks.app-tabbar > .app-tabbar-shell > a:hover span:last-child::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -8px !important;
  width: 100% !important;
  min-width: 24px !important;
  height: 2px !important;
  transform: translateX(-50%) !important;
  background: var(--final-nav-line) !important;
}

/* En calendario: desaparece el centro y quedan 4 columnas */
html body[data-active-view="reservas"] nav#navLinks.app-tabbar > .app-tabbar-shell {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html body[data-active-view="reservas"] nav#navLinks.app-tabbar > .app-tabbar-shell > a.app-center-reserve {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body[data-active-view="reservas"] nav#navLinks.app-tabbar > .app-tabbar-shell > a:nth-of-type(1) { grid-column: 1 !important; }
html body[data-active-view="reservas"] nav#navLinks.app-tabbar > .app-tabbar-shell > a:nth-of-type(2) { grid-column: 2 !important; }
html body[data-active-view="reservas"] nav#navLinks.app-tabbar > .app-tabbar-shell > a:nth-of-type(4) { grid-column: 3 !important; }
html body[data-active-view="reservas"] nav#navLinks.app-tabbar > .app-tabbar-shell > a:nth-of-type(5) { grid-column: 4 !important; }

/* Responsive */
@media (max-width: 520px) {
  html body nav#navLinks.app-tabbar {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  }

  html body nav#navLinks.app-tabbar > .app-tabbar-shell > a,
  html body nav#navLinks.app-tabbar > .app-tabbar-shell > a:not(:last-child),
  html body nav#navLinks.app-tabbar > .app-tabbar-shell > a:not(:last-of-type),
  html body nav#navLinks.app-tabbar > .app-tabbar-shell > a:not(.app-center-reserve),
  html body nav#navLinks.app-tabbar > .app-tabbar-shell > a.app-center-reserve {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 2px 10px !important;
    gap: 3px !important;
    font-size: clamp(.39rem, 2.15vw, .52rem) !important;
    letter-spacing: .045em !important;
  }

  html body nav#navLinks.app-tabbar .tab-icon {
    font-size: .72rem !important;
  }
}