/* Contenedor principal con flex */
.input-group-colonias {
  display: flex;
   gap: 10px;
  width: 100%;
  align-items: center;
}


.input-group-colonias button {
  flex: 0 0 auto; /* no crece ni se encoge */
  padding: 6px 12px;
  border: 1px solid #ccc;
  cursor: pointer;
}

/* Ajustes para pantallas muy pequeñas */
@media (max-width: 400px) {
  .input-group-colonias {
    flex-direction: column; /* apila los elementos verticalmente */
    align-items: stretch; /* ocupa todo el ancho */
  }

  .input-group-colonias button {
    width: 100%; /* botones ocupan todo el ancho */
  }
}

.tabla-container {
  max-height: 280px;
  width: 110%;          /* ocupa todo el ancho disponible */
  overflow-y: auto;     /* scroll vertical */
  margin-bottom: 35px;
  box-sizing: border-box;
  padding: 0 10px;      /* opcional: algo de padding */
}

/* Ajustes para pantallas medianas */
@media (max-width: 824px) {
  .tabla-container {
    max-width: 110%;     /* un poco de margen lateral */    
    margin-left: -45px;
}   
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 375px) {
  .tabla-container {
    max-width: 100%;
    margin-bottom: 20px;
    max-height: 200px;  /* altura más pequeña para móviles */
  }
}