/* Estilos personalizados y utilidades para la PWA de Guías TTKW */
:root {
  --safe-bottom: env(safe-area-inset-bottom, 16px);
  --safe-top: env(safe-area-inset-top, 0px);
}

body {
  padding-bottom: calc(76px + var(--safe-bottom));
  padding-top: var(--safe-top);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Tab Bar nativo con blur y safe-area */
.bottom-nav {
  padding-bottom: var(--safe-bottom);
}

/* Efecto de Alto Brillo para el QR */
.qr-high-contrast {
  box-shadow: 0 0 35px 5px rgba(255, 255, 255, 0.9), 0 0 70px 10px rgba(0, 168, 150, 0.4);
}

/* Transiciones entre Tabs */
.tab-pane {
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.tab-pane.active {
  display: block;
  opacity: 1;
}

/* Micro-animación de tabs */
.nav-item.active {
  color: #02C39A;
}

.nav-item.active svg {
  stroke: #02C39A;
  transform: translateY(-2px);
}

/* Scroll horizontal suave para chips de filtros */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Simulación de Toast flotante */
#toast-notification {
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease;
}