/* ===============================
   MOBILE HORIZONTAL SCROLL FIX
   Agregar este archivo a TODAS las páginas
================================ */

/* PREVENT HORIZONTAL OVERFLOW */
body,
html {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

/* Asegurar que no haya elementos que se salgan del viewport */
main,
section,
.navbar,
.container,
.row,
footer {
  width: 100%;
  overflow-x: hidden;
  max-width: 100%;
}

/* Responsive images and media */
img,
picture,
video,
iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Tables responsive */
table {
  width: 100%;
  overflow-x: auto;
  display: block;
}

/* Code blocks responsive */
pre,
code {
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

/* Remove extra padding en móviles que cause overflow */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  .container,
  .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
    max-width: 100%;
  }

  .navbar {
    padding-left: 0;
    padding-right: 0;
  }

  .navbar-brand {
    margin-left: 1rem;
  }

  .navbar-toggler {
    margin-right: 1rem;
  }

  .section,
  section {
    padding-left: 0;
    padding-right: 0;
  }

  /* Asegurar que las filas no causen overflow */
  .row {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  /* Asegurar que los cols no causen overflow */
  [class*="col-"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* Fix para elementos absolutamente posicionados */
  body {
    position: relative;
  }

  /* Evitar que los elementos flotantes causen overflow */
  .float-start,
  .float-end {
    float: none !important;
  }
}

@media (max-width: 480px) {
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  .container,
  .container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  img {
    max-width: 100%;
    width: 100%;
  }
}