/* ========================================
   TABLA BASE
   ======================================== */

/* Contenedor de DataTables (DT2: div.dt-container) */
div.dt-container {
  font-family: var(--font-family-main);
  color: var(--corporate-black);
}

/* Tabla principal */
div.dt-container table.dataTable {
  border-collapse: separate;
  border-spacing: 0;
  border: none;
  border-radius: 0;
}

/* ========================================
   ENCABEZADOS DE TABLA
   ======================================== */

/* Headers de tabla */
div.dt-container table.dataTable thead th {
  background-color: transparent;
  color: var(--corporate-black);
  font-weight: 600;
  font-size: var(--font-size-body);
  border-bottom: 2px solid rgba(30, 30, 30, 0.15);
  padding: var(--spacing-md);
  text-align: left;
}

/* Iconos de ordenamiento (DT2 usa dt-orderable-asc / dt-orderable-desc) */
div.dt-container table.dataTable thead th.dt-orderable-asc,
div.dt-container table.dataTable thead th.dt-orderable-desc,
div.dt-container table.dataTable thead th.dt-ordering-asc,
div.dt-container table.dataTable thead th.dt-ordering-desc {
  cursor: pointer;
  position: relative;
}

/*  HOVER
div.dt-container table.dataTable thead th.dt-orderable-asc:hover,
div.dt-container table.dataTable thead th.dt-orderable-desc:hover,
div.dt-container table.dataTable thead th.dt-ordering-asc:hover,
div.dt-container table.dataTable thead th.dt-ordering-desc:hover {
  background-color: rgba(127, 71, 144, 0.1);
  color: var(--corporate-purple);
}
  /*

/* ========================================
   FILAS DE TABLA
   ======================================== */

/* Filas del body */
div.dt-container table.dataTable tbody tr {
  transition: background-color 0.2s ease;
}

div.dt-container table.dataTable tbody td {
  padding: var(--spacing-md);
  border-bottom: 1px solid rgba(30, 30, 30, 0.1);
  color: var(--corporate-black);
  font-size: var(--font-size-body);
}

/* Hover en filas — Desactivado para coincidir con estilo estándar */
div.dt-container table.table.dataTable.table-hover>tbody>tr:hover>* {
  box-shadow: none !important;
}

/* Fila seleccionada */
div.dt-container table.dataTable tbody tr.selected>* {
  box-shadow: inset 0 0 0 9999px rgba(127, 71, 144, 0.15) !important;
}

/* Filas alternas (striped) — DT2 usa box-shadow inset sobre los td, NO background-color sobre tr */
div.dt-container table.table.dataTable.table-striped>tbody>tr:nth-of-type(odd)>* {
  box-shadow: inset 0 0 0 9999px rgba(57, 119, 180, 0.05) !important;
}

div.dt-container table.table.dataTable.table-striped>tbody>tr:nth-of-type(even)>* {
  box-shadow: none !important;
}

/*
div.dt-container table.table.dataTable.table-striped>tbody>tr:nth-of-type(odd):hover>* {
  box-shadow: inset 0 0 0 9999px rgba(127, 71, 144, 0.08) !important;
}
*/

/* Desactivar fondo de columna ordenada */
div.dt-container table.dataTable>tbody>tr>td.sorting_1,
div.dt-container table.dataTable>tbody>tr>td.sorting_2,
div.dt-container table.dataTable>tbody>tr>td.sorting_3,
div.dt-container table.dataTable>tbody>tr>th.sorting_1,
div.dt-container table.dataTable>tbody>tr>th.sorting_2,
div.dt-container table.dataTable>tbody>tr>th.sorting_3 {
  box-shadow: none !important;
}

/* ========================================
   PAGINACIÓN
   ======================================== */

/* Contenedor de paginación (DT2: .dt-paging) */
div.dt-container .dt-paging {
  margin-top: var(--spacing-md);
  text-align: right;
  display: flex;
  justify-content: flex-end;
}

/* Items de paginación - Look outline corporativo */
div.dt-container .dt-paging .pagination {
  --bs-pagination-focus-color: var(--bs-pagination-color);
  --bs-pagination-focus-bg: transparent;
  --bs-pagination-focus-box-shadow: none;
}

div.dt-container .dt-paging .page-link {
  outline: none !important;
  background-color: transparent;
  border: 1px solid rgba(30, 30, 30, 0.15) !important;
}

/* Previous button - Blue (matching universal pagination) */
div.dt-container .dt-paging .pagination .page-item.previous .page-link {
  border: 1px solid rgba(30, 30, 30, 0.15) !important;
  color: var(--corporate-blue) !important;
}

div.dt-container .dt-paging .pagination .page-item.previous .page-link:hover:not(.disabled) {
  background-color: var(--corporate-blue) !important;
  border-color: var(--corporate-blue) !important;
  color: white !important;
}

/* Next button - Blue (btn-outline-primary style) */
div.dt-container .dt-paging .pagination .page-item.next .page-link {
  border: 1px solid rgba(30, 30, 30, 0.15) !important;
  color: var(--corporate-blue) !important;
}

div.dt-container .dt-paging .pagination .page-item.next .page-link:hover:not(.disabled) {
  background-color: var(--corporate-blue) !important;
  border-color: var(--corporate-blue) !important;
  color: white !important;
}

/* Disabled state */
div.dt-container .dt-paging .pagination .page-item.disabled .page-link {
  opacity: 0.5;
  border-color: rgba(30, 30, 30, 0.15) !important;
  color: #6c757d !important;
  background-color: transparent !important;
}

/* General hover effect for all page links (numbers, etc.) */
div.dt-container .dt-paging .pagination .page-link:hover:not(.disabled) {
  background-color: var(--corporate-blue) !important;
  border-color: var(--corporate-blue) !important;
  color: white !important;
}

/* Item activo en DataTables (para paginación con números si se activa) */
div.dt-container .dt-paging .page-item.active .page-link {
  background-color: var(--corporate-blue) !important;
  border-color: var(--corporate-blue) !important;
  color: white !important;
}

/* ========================================
   INFORMACIÓN Y BÚSQUEDA
   ======================================== */

/* Información de registros (DT2: .dt-info) */
div.dt-container .dt-info {
  color: var(--corporate-black);
  font-size: var(--font-size-body);
  padding-top: var(--spacing-md);
}

/* Campo de búsqueda (DT2: .dt-search) */
div.dt-container .dt-search input {
  border: var(--border-card);
  border-radius: var(--border-radius-button);
  padding: 5px var(--spacing-sm);
  font-size: var(--font-size-body);
  color: var(--corporate-black);
  transition: border-color 0.3s ease;
}

div.dt-container .dt-search input:focus {
  outline: none;
  border-color: var(--corporate-blue);
  box-shadow: 0 0 0 0.2rem rgba(57, 119, 180, 0.25);
}

/* Label de búsqueda */
div.dt-container .dt-search label {
  color: var(--corporate-blue);
  font-weight: 600;
  font-size: var(--font-size-body);
}

/* ========================================
   SELECTOR DE LONGITUD
   ======================================== */

/* Selector de cantidad de registros (DT2: .dt-length) */
div.dt-container .dt-length select,
select.form-select.form-select-sm[id^="dt-length-"] {
  border: var(--border-card);
  border-radius: var(--border-radius-button);
  padding: 5px var(--spacing-sm);
  padding-right: 2.22rem !important;
  /* Espacio para la flecha */
  font-size: var(--font-size-body);
  color: var(--corporate-black);
  transition: border-color 0.3s ease;
  width: auto !important;
  min-width: 5.5rem !important;
}

div.dt-container .dt-length select:focus {
  outline: none;
  border-color: var(--corporate-blue);
  box-shadow: 0 0 0 0.2rem rgba(57, 119, 180, 0.25);
}

/* Label de longitud */
div.dt-container .dt-length label {
  color: var(--corporate-blue);
  font-weight: 600;
  font-size: var(--font-size-body);
}

/* ========================================
   BOTONES DE ACCIÓN
   ======================================== */

/* Botones dentro de tablas */
div.dt-container table.dataTable tbody td .btn {
  font-size: var(--font-size-small);
  padding: 5px var(--spacing-sm);
  border-radius: var(--border-radius-button);
}

div.dt-container table.dataTable tbody td .btn-primary {
  background-color: var(--corporate-purple);
  border-color: var(--corporate-purple);
}

div.dt-container table.dataTable tbody td .btn-secondary {
  background-color: transparent;
  border-color: var(--corporate-blue);
  color: var(--corporate-blue);
}

div.dt-container table.dataTable tbody td .btn-secondary:hover {
  background-color: var(--corporate-blue);
  color: white;
}

/* Enlaces dentro de tablas */
div.dt-container table.dataTable tbody td a {
  color: var(--link-blue);
  text-decoration: none;
  transition: color 0.3s ease;
}

div.dt-container table.dataTable tbody td a:hover {
  color: var(--link-blue);
  text-decoration: underline;
}

/* ========================================
   ESTADOS ESPECIALES
   ======================================== */

/* Tabla vacía */
div.dt-container .dataTables_empty {
  text-align: center;
  color: rgba(30, 30, 30, 0.6);
  font-style: italic;
  padding: var(--spacing-xl) !important;
}

/* Processing (cargando) — DT2: div.dt-processing */
div.dt-processing {
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--corporate-purple);
  font-weight: 600;
  border: 2px solid var(--corporate-purple);
  border-radius: var(--border-radius-card);
  padding: var(--spacing-md);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  div.dt-container .dt-paging .page-link {
    width: 80px;
    font-size: 11px;
  }

  div.dt-container table.dataTable thead th,
  div.dt-container table.dataTable tbody td {
    padding: var(--spacing-sm);
    font-size: var(--font-size-small);
  }

  div.dt-container .dt-info,
  div.dt-container .dt-search label,
  div.dt-container .dt-length label {
    font-size: var(--font-size-small);
  }
}

/* ========================================
   COMPATIBILIDAD
   ======================================== */

/* Prevenir flickering durante inicialización */
table[data-x-datatable]:not(.dataTable) tbody {
  visibility: hidden;
}

table[data-x-datatable].dataTable tbody {
  visibility: visible;
}