/*================================================
  SCROLL HORIZONTAL PARA TABLAS RESPONSIVAS
  Mantiene el tamaño original de las tablas
  y permite scroll horizontal en pantallas pequeñas
================================================*/

/* Contenedor wrapper para todas las tablas */
.table-responsive-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
}

/* Contenedor responsivo para tablas */
.table-responsive-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  margin-bottom: 15px;
}

.table-responsive-wrapper table {
  width: 100%;
  margin: 0;
}

.table-responsive-wrapper table thead th {
  background-color: #f5f5f5;
  border-bottom: 2px solid #ddd;
  font-weight: 600;
  white-space: nowrap;
  padding: 10px;
  text-align: left;
}

.table-responsive-wrapper table tbody td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.table-responsive-wrapper table tbody tr:hover {
  background-color: #f9f9f9;
}

/* DataTables (jQuery DataTables) */
.dataTables_wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dataTables_wrapper .dataTables_scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tablas Bootstrap */
.table {
  width: 100%;
  margin-bottom: 0;
  table-layout: auto;
}

/* Celdas de tabla */
td, th {
  padding: 10px;
  vertical-align: middle;
}

/* Estilos para DataTables específicamente */
.dataTable tbody tr:hover {
  background-color: #f5f5f5;
}

table.dataTable {
  margin: 0 !important;
  border-collapse: collapse;
}

table.dataTable.no-footer {
  border-bottom: 1px solid #ddd;
}

/* Media queries para responsividad */
@media (max-width: 1200px) {
  .table-responsive-scroll,
  .dataTables_wrapper {
    overflow-x: auto;
  }
}

@media (max-width: 768px) {
  .table {
    font-size: 0.9rem;
  }
  
  td, th {
    padding: 8px;
  }
  
  .table-responsive-scroll,
  .dataTables_wrapper {
    border: 1px solid #ddd;
    border-radius: 4px;
  }
}

@media (max-width: 576px) {
  .table {
    font-size: 0.85rem;
  }
  
  td, th {
    padding: 6px;
  }
}

/* REMOVER COMPLETAMENTE EL BOTÓN "+" DE DATATABLES EN TODAS LAS PANTALLAS */
.dtr-control,
.dtr-expand,
.dt-checkboxes-cell {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* Ocultar la columna de control de DataTables */
table.dataTable thead th:first-child.dtr-column,
table.dataTable tbody td:first-child.dtr-column {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Asegurar que TODAS las demás columnas son siempre visibles */
table.dataTable thead th,
table.dataTable tbody td {
  display: table-cell !important;
  visibility: visible !important;
}

/* Ocultar scroll bar vertical cuando no es necesario */
@media (max-width: 768px) {
  .table-responsive-wrapper {
    margin: 0 -15px;
    padding: 0 15px;
  }
}

/*================================================
  SCROLL HORIZONTAL GENERAL PARA TABLAS ANCHAS
  Scroll sticky en la parte inferior de la pantalla
================================================*/

/* Contenedor de tabla con scroll */
.box-body {
  position: relative;
}

/* Barra de scroll sticky flotante */
.sticky-scroll-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 16px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.1));
  z-index: 1000;
  overflow-x: auto;
  overflow-y: hidden;
  display: none;
  border-top: 1px solid #ddd;
}

.sticky-scroll-wrapper.visible {
  display: block;
}

.sticky-scroll-content {
  height: 1px;
}

/* Scrollbar estilos para la barra sticky */
.sticky-scroll-wrapper::-webkit-scrollbar {
  height: 12px;
}

.sticky-scroll-wrapper::-webkit-scrollbar-track {
  background: #e9ecef;
  border-radius: 0;
}

.sticky-scroll-wrapper::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #6c757d, #495057);
  border-radius: 6px;
  border: 2px solid #e9ecef;
}

.sticky-scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #495057, #343a40);
}

/* Firefox scrollbar */
.sticky-scroll-wrapper {
  scrollbar-width: thin;
  scrollbar-color: #6c757d #e9ecef;
}

/* Tema oscuro - barra sticky */
.dark-mode .sticky-scroll-wrapper {
  background: linear-gradient(to bottom, rgba(255,255,255,0.02), rgba(255,255,255,0.05));
  border-top: 1px solid #3d5a73;
}

.dark-mode .sticky-scroll-wrapper::-webkit-scrollbar-track {
  background: #1e2a35;
}

.dark-mode .sticky-scroll-wrapper::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #4a6a8a, #3d5a73);
  border: 2px solid #1e2a35;
}

.dark-mode .sticky-scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #5a7a9a, #4a6a8a);
}

.dark-mode .sticky-scroll-wrapper {
  scrollbar-color: #4a6a8a #1e2a35;
}

/* Contenedor principal - scroll normal */
.content-wrapper {
  overflow-x: auto;
  overflow-y: visible;
}

.content-wrapper > .content {
  min-width: fit-content;
}

.box {
  min-width: fit-content;
}

.dataTables_wrapper {
  min-width: fit-content;
  overflow-x: auto;
}

/* Ocultar scrollbar del content-wrapper cuando hay sticky scroll */
.has-sticky-scroll .content-wrapper::-webkit-scrollbar {
  height: 0;
  display: none;
}

.has-sticky-scroll .content-wrapper {
  scrollbar-width: none;
}