/* 
 * Estilos PWA para mejorar gestos de navegación en móvil
 * Este archivo solo se aplica cuando la app está en modo standalone (instalada)
 */

@media (display-mode: standalone) {
  /* Deshabilitar gestos de navegación del navegador */
  html, body {
    overscroll-behavior-x: none;
    touch-action: pan-y pinch-zoom;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  
  /* Permitir selección de texto en inputs y textareas */
  input, textarea, [contenteditable] {
    -webkit-user-select: text;
    user-select: text;
  }
  
  /* Deshabilitar el efecto de rebote horizontal */
  * {
    overscroll-behavior-x: none;
  }
  
  /* Mejorar el rendimiento de los gestos */
  body {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
  }
  
  /* Prevenir el pull-to-refresh en algunos navegadores */
  body {
    overscroll-behavior-y: contain;
  }
}

/* Solo en móvil */
@media (max-width: 768px) and (display-mode: standalone) {
  /* Ocultar elementos que pueden interferir con los gestos */
  ::-webkit-scrollbar {
    display: none;
  }
  
  /* Optimizar el rendimiento de las transiciones táctiles */
  * {
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Mejorar la respuesta táctil de los botones */
  button, a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    touch-action: manipulation;
  }
}

/* Indicador visual de que se puede retroceder (opcional) */
@media (display-mode: standalone) and (max-width: 768px) {
  /* Añadir un ligero gradiente en el borde derecho para indicar que se puede deslizar */
  body::after {
    content: '';
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1));
    pointer-events: none;
    z-index: 9999;
  }
  
  /* En tema claro */
  .light body::after {
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.05));
  }
}