/* === Estilos Responsivos Globales para Tablas === */

.table-responsive-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive-wrapper .table {
  width: 100%;
  border-collapse: collapse;
}

@media (max-width: 992px) {
  .table th,
  .table td {
    font-size: 0.9rem;
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  .table th,
  .table td {
    font-size: 0.8rem;
    padding: 0.4rem;
  }
  .card-body {
    padding: 0.75rem !important;
  }
}

/* === Corrección de integración con el layout principal (.config) === */

/* Asegura que las tablas no afecten el flex del layout */
#wrapper {
  overflow: hidden;
}

/* El contenido del contenedor principal puede desplazarse sin afectar el sidebar */
#page-content-wrapper {
  overflow-x: auto;
  overflow-y: visible;
}

/* Controla la tabla interna sin expandir el body */
.table-responsive-wrapper {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background-color: #fff;
  border-radius: 0.5rem;
}

/* Ajustes finos en pantallas pequeñas */
@media (max-width: 768px) {
  #page-content-wrapper {
    padding: 1rem;
  }
  .table-responsive-wrapper {
    border: 1px solid #dee2e6;
  }
}