.table-responsive {
    overflow-x: auto; /* Permite el desplazamiento horizontal si es necesario */
}

.table {
    width: 100%; /* Asegura que la tabla ocupe todo el ancho del contenedor */
    table-layout: auto; /* Permite que las columnas se ajusten automáticamente */
}

.table th, .table td {
    overflow: hidden; /* Oculta el desbordamiento */
    text-overflow: ellipsis; /* Añade puntos suspensivos al texto que se desborda */
    white-space: normal; /* Permite que el texto se envuelva */
}

.table th.text-start {
    width: 300px; /* Ajusta este valor según tus necesidades */
}

.w-150 {
    width:150px; /* Ajusta este valor según tus necesidades */
}

.media-body .card-item-desc {
    white-space: normal; /* Permite que el texto se envuelva */
}

/* ============================================
   Deshabilitar sticky headers en tablas
   Para evitar superposición con modales
   ============================================ */

/* Deshabilitar sticky header en todas las tablas DataTables */
table.dataTable thead th {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
}

table.dataTable thead {
    position: static !important;
}

/* Deshabilitar sticky header en tablas con plugin table-rep-plugin */
.table-rep-plugin thead th {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
}

.table-rep-plugin thead {
    position: static !important;
}

/* Deshabilitar sticky header en tablas generales */
.table thead th {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
}

.table thead {
    position: static !important;
}

/* Asegurar que los modales estén por encima de todo */
.modal {
    z-index: 1055 !important;
}

.modal-backdrop {
    z-index: 1050 !important;
}

/* Modales específicos con z-index más alto si es necesario */
.modal.show {
    z-index: 1055 !important;
}

/* ============================================
   Estilos globales para inputs de búsqueda en DataTables
   Compatible con tema claro y dark
   ============================================ */

/* Estilos base para inputs de búsqueda en el segundo thead de datatables */
table.dataTable thead th input[type="text"],
.table-rep-plugin table thead th input[type="text"],
table[id*="_datatable"] thead th input[type="text"] {
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--input-border, #dee2e6);
    border-radius: 0.35rem;
    background-color: var(--form-control-bg, #ffffff);
    color: var(--default-text-color, #333335);
}

table.dataTable thead th input[type="text"]:focus,
.table-rep-plugin table thead th input[type="text"]:focus,
table[id*="_datatable"] thead th input[type="text"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05);
    background-color: var(--form-control-bg, #ffffff);
    color: var(--default-text-color, #333335);
}

table.dataTable thead th input[type="text"]::placeholder,
.table-rep-plugin table thead th input[type="text"]::placeholder,
table[id*="_datatable"] thead th input[type="text"]::placeholder {
    color: var(--text-muted, #7987a1);
}

/* Estilos específicos para dark mode */
[data-theme-mode=dark] table.dataTable thead th input[type="text"],
[data-theme-mode=dark] .table-rep-plugin table thead th input[type="text"],
[data-theme-mode=dark] table[id*="_datatable"] thead th input[type="text"] {
    background-color: var(--form-control-bg);
    border-color: var(--input-border);
    color: var(--default-text-color);
}

[data-theme-mode=dark] table.dataTable thead th input[type="text"]:focus,
[data-theme-mode=dark] .table-rep-plugin table thead th input[type="text"]:focus,
[data-theme-mode=dark] table[id*="_datatable"] thead th input[type="text"]:focus {
    background-color: var(--form-control-bg);
    border-color: var(--primary-color);
    color: var(--default-text-color);
}

[data-theme-mode=dark] table.dataTable thead th input[type="text"]::placeholder,
[data-theme-mode=dark] .table-rep-plugin table thead th input[type="text"]::placeholder,
[data-theme-mode=dark] table[id*="_datatable"] thead th input[type="text"]::placeholder {
    color: var(--text-muted);
}