/* =====================================================
   📱 MOBILE DEAD ZONES — Prevent accidental taps on edges
   =====================================================
   Los usuarios hacen scroll con los pulgares en los bordes
   izquierdo y derecho de la pantalla. Estos divs invisibles
   interceptan toques en esas zonas para evitar activar
   botones, links o elementos interactivos accidentalmente.
   Solo activo en móvil (max-width: 768px).
   ===================================================== */

.mobile-dead-zone {
  display: none; /* Oculto en desktop */
}

@media (max-width: 768px) {
  .mobile-dead-zone {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 28px; /* ~7% de pantalla de 400px */
    z-index: 9990; /* Debajo del header (99999) pero encima del contenido */
    pointer-events: auto;
    touch-action: pan-y; /* Permitir scroll vertical, bloquear taps */
    -webkit-tap-highlight-color: transparent;
    /* background: rgba(255,0,0,0.1); /* DEBUG: descomentar para ver zonas */
  }

  .mobile-dead-zone--left {
    left: 0;
  }

  .mobile-dead-zone--right {
    right: 0;
  }

  /* No bloquear el header/navbar */
  .mobile-dead-zone {
    top: var(--header-h, 70px);
  }
}