/**
 * CSS para casos específicos de responsive que necesitan tratamiento especial
 */

/* Imágenes con dimensiones específicas que necesitan ser responsive */
img[width], img[height] {
  max-width: 100% !important;
  height: auto !important;
  width: auto !important;
}

/* SVGs responsivos */
svg {
  max-width: 100%;
  height: auto;
}

/* Picture elements responsive */
picture img {
  max-width: 100% !important;
  height: auto !important;
  width: 100% !important;
}

/* Corrección específica para elementos source */
source[width], source[height] {
  width: auto !important;
  height: auto !important;
}

/* Contenedores de imágenes responsive */
.image-container {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.image-container img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block;
}

/* Correcciones específicas para logos */
.footer-logo {
  max-width: 180px !important;
  width: auto !important;
  height: auto !important;
}

/* Responsive para tablas */
.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100vw;
}

.table-container table {
  min-width: 100%;
}

/* Corrección para elementos que causan overflow horizontal */
.overflow-fix {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Media queries específicas para problemas identificados */
@media (max-width: 480px) {
  /* Forzar responsive en móviles pequeños */
  img, picture, svg {
    max-width: 100% !important;

    height: auto !important;
  }
  
  /* Contenedores problemáticos */
  .container, .section-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 100vw !important;
  }
}

@media (max-width: 320px) {
  /* Dispositivos muy pequeños */
  * {
    max-width: 100vw !important;
  }
  
  img[width], img[height], svg[width], svg[height] {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
  }
}