/* Logo grande visible cuando el sidebar está expandido */
.sidebar-brand-full {
  display: block;
  text-align: center;
}
.sidebar-brand-full img {
  width: 100%; /* tamaño del logo grande */
  height: auto;
}

/* Logo pequeño oculto por defecto */
.sidebar-brand-mini {
  display: none;
  text-align: center;
}
.sidebar-brand-mini img {
  width: 100%; /* tamaño del logo pequeño */
  height: auto;
}

/* Cuando el sidebar está colapsado */
.sidebar.toggled .sidebar-brand-full {
  display: none;
}
.sidebar.toggled .sidebar-brand-mini {
  display: block;
}

/* Estilo global para todas las tablas */
.table th,
.table td {
  vertical-align: middle !important; /* Centra verticalmente */
  color: #000 !important; /* Texto negro */
  font-size: 0.875rem !important; /* Tamaño tipo 'small' */
}

/* Opcional: mejora el contraste del encabezado */
.table thead th {
  color: #000 !important;
  font-weight: 600; /* Texto un poco más fuerte */
}
y

table.dataTable tbody th,
table.dataTable tbody td {
  vertical-align: middle !important;
  color: #000 !important; /* Texto negro */
  font-size: 0.875rem !important; /* Tamaño tipo 'small' */
}

/*
 * SOLUCIÓN DEFINITIVA: Forzar la altura y re-habilitar el scroll solo en el contenido.
 */

/*
 * SOLUCIÓN FINAL: Permite que el sidebar se estire dinámicamente con contenido largo.
 * El problema es que el cuerpo (body) tiene overflow: hidden en algunos casos.
 */
html, body {
    height: 100%;
}

#wrapper {
    min-height: 100vh; /* Que el wrapper siempre cubra toda la pantalla */
    display: flex;
    flex-direction: row;
}

#content-wrapper {
    flex: 1; /* Que el contenido ocupe todo el espacio disponible */
    display: flex;
    flex-direction: column;
}

#content-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Siempre ocupa toda la altura de la pantalla */
}

#content {
    flex: 1 0 auto; /* Permite crecer según el contenido */
    overflow: visible; /* Importante si hay collapse al final */
}