/* manejo de data table */
@media (max-width: 576px) {
  .table th, .table td {
      white-space: nowrap; /* Evitar que el contenido se desborde */
  }
}

/* personalizacion de pantalla para manejar un div con columnas, 
organizar las columnas dentro de una fila
*/

/* Breakpoint para pantallas medianas (md: ≥768px) */
@media (min-width: 768px) {
  .custom-row {
      grid-template-columns: repeat(2, 1fr); /* 2 columnas */
  }
}

/* Breakpoint para pantallas grandes (lg: ≥992px) */
@media (min-width: 992px) {
  .custom-row {
      grid-template-columns: repeat(0, 3fr); /* 3 columnas */
  }
}

/* Breakpoint para pantallas extra grandes (xxl: ≥1400px) */
@media (min-width: 1400px) {
  .custom-row {
      grid-template-columns: repeat(4, 1fr); /* 4 columnas */
  }
}

/* Breakpoint para pantallas pequeñas: 1 control por fila */
@media (max-width: 767px) {
  .custom-col {
      grid-template-columns: 1fr;
  }
}

/* Breakpoint para pantallas medianas (md: ≥768px): 2 controles por fila */
@media (min-width: 768px) and (max-width: 991px) {
  .custom-col {
      grid-template-columns: repeat(2, 1fr);
  }
}

/* Breakpoint para pantallas grandes (lg: ≥992px): 3 controles por fila */
@media (min-width: 992px) and (max-width: 1199px) {
  .custom-col {
      grid-template-columns: repeat(3, 1fr);
  }
}

/* Breakpoint para pantallas extra grandes (xl: ≥1200px): 4 controles por fila */
@media (min-width: 1200px) {
  .custom-col {
      grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .form-group input.personalizar,
  .form-group select.personalizar,
  .form-group textarea.personalizar {
    max-width: 100%; /* Usa el ancho completo del contenedor */
  }
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr; /* Cambia a una sola columna en pantallas pequeñas */
  }
}