/* ─────────────────────────────────────────────────────────
   DATATABLES — hoja de estilo completa del proyecto

   No se carga dataTables.dataTables.min.css. Esa hoja trae bordes de 1px,
   degradados grises y un `color: ... !important` en los botones del paginador
   que ningún selector puede pisar, así que en vez de pelear con ella se
   sustituye entera. Aquí está TODO lo que DataTables necesita para verse
   bien; si algún día se actualiza la librería, revisar que no haya clases
   nuevas sin estilo.

   Marca que genera DataTables 2:
     div.dt-container
       div.dt-layout-row                    arriba: dt-length + dt-search
         div.dt-layout-cell.dt-layout-start
         div.dt-layout-cell.dt-layout-end
       div.dt-layout-row.dt-layout-table    la tabla
       div.dt-layout-row                    abajo: dt-info + dt-paging
     th  →  <span class="dt-column-title">  +  <span class="dt-column-order">
   ───────────────────────────────────────────────────────── */

div.dt-container {
  --dt-pad: 1.25rem;
  --dt-primario: rgb(37 99 235);
  --dt-primario-suave: rgb(37 99 235 / 0.08);
  --dt-primario-anillo: rgb(37 99 235 / 0.16);
  --dt-texto: rgb(15 23 42);
  --dt-texto-tenue: rgb(100 116 139);
  --dt-relleno: rgb(241 245 249);
  --dt-relleno-hover: rgb(226 232 240);

  position: relative;
  padding: 1rem var(--dt-pad) 1.125rem;
  clear: both;
}
@media (min-width: 768px) {
  div.dt-container { --dt-pad: 1.5rem; }
}

/* Tabla dentro de una tarjeta que ya trae su propio padding */
.dt-plano div.dt-container { padding: 0; }

/* ─────────────────────────────────────────────────────────
   REJILLA DE LA BARRA DE HERRAMIENTAS
   ───────────────────────────────────────────────────────── */
div.dt-container div.dt-layout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
}
div.dt-container div.dt-layout-row:first-child { margin-bottom: 0.875rem; }
div.dt-container div.dt-layout-row:last-child { margin-top: 1rem; }

div.dt-container div.dt-layout-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
div.dt-container div.dt-layout-cell.dt-layout-start {
  justify-content: flex-start;
  margin-right: auto;
}
div.dt-container div.dt-layout-cell.dt-layout-end {
  justify-content: flex-end;
  margin-left: auto;
}
div.dt-container div.dt-layout-cell.dt-layout-full {
  justify-content: space-between;
  width: 100%;
}
div.dt-container div.dt-layout-cell:empty { display: none; }

/* La tabla se desplaza a lo ancho sin arrastrar a la barra de herramientas,
   y sangra hasta el borde de la tarjeta */
div.dt-container div.dt-layout-row.dt-layout-table {
  display: block;
  overflow-x: auto;
  margin: 0 calc(-1 * var(--dt-pad));
  padding: 0 var(--dt-pad);
  -webkit-overflow-scrolling: touch;
}
div.dt-container div.dt-layout-row.dt-layout-table > div { width: 100%; }
.dt-plano div.dt-container div.dt-layout-row.dt-layout-table {
  margin: 0;
  padding: 0;
}

/* ─────────────────────────────────────────────────────────
   BUSCADOR
   ───────────────────────────────────────────────────────── */
div.dt-container div.dt-search { gap: 0; }
div.dt-container div.dt-search label { display: none; }

div.dt-container div.dt-search input.dt-input {
  box-sizing: border-box;
  width: 17rem;
  max-width: 100%;
  height: 2.375rem;
  padding: 0 0.875rem 0 2.375rem;
  margin: 0;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--dt-texto);
  background-color: var(--dt-relleno);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.3-4.3'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 0.8125rem center;
  background-size: 1rem 1rem;
  border: none;
  border-radius: 0.75rem;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 0.15s, box-shadow 0.15s;
}
div.dt-container div.dt-search input.dt-input::placeholder {
  color: rgb(148 163 184);
  font-weight: 400;
}
div.dt-container div.dt-search input.dt-input::-webkit-search-cancel-button,
div.dt-container div.dt-search input.dt-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
div.dt-container div.dt-search input.dt-input:hover:not(:focus) {
  background-color: var(--dt-relleno-hover);
}
div.dt-container div.dt-search input.dt-input:focus {
  outline: none;
  background-color: white;
  /* La lupa se tiñe de primario al enfocar */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.3-4.3'%3E%3C/path%3E%3C/svg%3E");
  box-shadow: 0 0 0 3px var(--dt-primario-anillo);
}

/* ─────────────────────────────────────────────────────────
   REGISTROS POR PÁGINA
   ───────────────────────────────────────────────────────── */
div.dt-container div.dt-length {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--dt-texto-tenue);
}
div.dt-container div.dt-length label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  white-space: nowrap;
}

div.dt-container div.dt-length select.dt-input {
  box-sizing: border-box;
  height: 2.375rem;
  padding: 0 2rem 0 0.875rem;
  margin: 0;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--dt-texto);
  background-color: var(--dt-relleno);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 1rem 1rem;
  border: none;
  border-radius: 0.75rem;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.15s;
}
div.dt-container div.dt-length select.dt-input:hover {
  background-color: var(--dt-relleno-hover);
}
div.dt-container div.dt-length select.dt-input:focus {
  outline: none;
  background-color: white;
  box-shadow: 0 0 0 3px var(--dt-primario-anillo);
}

/* ─────────────────────────────────────────────────────────
   "Mostrando 1–10 de 34"
   ───────────────────────────────────────────────────────── */
div.dt-container div.dt-info {
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--dt-texto-tenue);
}
div.dt-container div.dt-info strong {
  font-weight: 800;
  color: var(--dt-texto);
}

/* ─────────────────────────────────────────────────────────
   PAGINADOR
   ───────────────────────────────────────────────────────── */
div.dt-container div.dt-paging { margin: 0; }
div.dt-container div.dt-paging nav {
  display: flex;
  align-items: center;
  gap: 0.1875rem;
  flex-wrap: wrap;
}

div.dt-container div.dt-paging button.dt-paging-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.625rem;
  margin: 0;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  color: rgb(71 85 105);
  background: transparent;
  border: none;
  border-radius: 0.625rem;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
div.dt-container div.dt-paging button.dt-paging-button:hover {
  background: var(--dt-primario-suave);
  color: var(--dt-primario);
}
div.dt-container div.dt-paging button.dt-paging-button.current,
div.dt-container div.dt-paging button.dt-paging-button.current:hover {
  background: var(--dt-primario);
  color: white;
  box-shadow: 0 2px 6px rgb(37 99 235 / 0.35);
}
div.dt-container div.dt-paging button.dt-paging-button.disabled,
div.dt-container div.dt-paging button.dt-paging-button.disabled:hover,
div.dt-container div.dt-paging button.dt-paging-button.disabled:active {
  color: rgb(203 213 225);
  background: transparent;
  box-shadow: none;
  cursor: default;
}
div.dt-container div.dt-paging button.dt-paging-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--dt-primario-anillo);
}

div.dt-container div.dt-paging span.ellipsis {
  min-width: 1.5rem;
  padding: 0;
  text-align: center;
  color: rgb(203 213 225);
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* Anterior y Siguiente llevan su flecha, dibujada con mask para que tome el
   color del botón (gris, primario al pasar el ratón, apagada si no aplica). */
div.dt-container div.dt-paging nav > button.dt-paging-button:first-child::before,
div.dt-container div.dt-paging nav > button.dt-paging-button:last-child::after {
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--dt-flecha) center / 1rem 1rem no-repeat;
  mask: var(--dt-flecha) center / 1rem 1rem no-repeat;
}
div.dt-container div.dt-paging nav > button.dt-paging-button:first-child::before {
  --dt-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
}
div.dt-container div.dt-paging nav > button.dt-paging-button:last-child::after {
  --dt-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}

/* ─────────────────────────────────────────────────────────
   TABLA
   ───────────────────────────────────────────────────────── */
table.dataTable {
  width: 100%;
  margin: 0;
}
table.dataTable th,
table.dataTable td { box-sizing: border-box; }

table.dataTable thead > tr > th,
table.dataTable tfoot > tr > th { border: none; }

table.dataTable tbody > tr { background-color: transparent; }
table.dataTable.table-std tbody > tr:hover { background-color: rgb(248 250 252); }

table.dataTable td.dt-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: rgb(148 163 184);
  font-weight: 500;
}

/* ── Cabecera ordenable ────────────────────────────────── */
table.dataTable thead > tr > th.dt-orderable-asc,
table.dataTable thead > tr > th.dt-orderable-desc,
table.dataTable thead > tr > th.dt-ordering-asc,
table.dataTable thead > tr > th.dt-ordering-desc {
  position: relative;
  /* Hueco para el chevron: sin esto se solaparía con el título */
  padding-right: 1.75rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  transition: color 0.15s;
}
table.dataTable thead > tr > th.dt-orderable-asc:hover,
table.dataTable thead > tr > th.dt-orderable-desc:hover,
table.dataTable thead > tr > th.dt-ordering-asc,
table.dataTable thead > tr > th.dt-ordering-desc {
  color: var(--dt-primario);
}
table.dataTable thead > tr > th span.dt-column-title { display: inline; }

/* Un solo chevron: apagado en reposo, en primario y girado al ordenar */
table.dataTable thead > tr > th span.dt-column-order {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 0.875rem;
  height: 0.875rem;
  background-color: currentColor;
  opacity: 0.25;
  transform: translateY(-50%);
  transition: opacity 0.15s, transform 0.15s;
  -webkit-mask: var(--dt-flecha-abajo) center / 0.875rem 0.875rem no-repeat;
  mask: var(--dt-flecha-abajo) center / 0.875rem 0.875rem no-repeat;
  --dt-flecha-abajo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
table.dataTable thead > tr > th.dt-orderable-asc:hover span.dt-column-order,
table.dataTable thead > tr > th.dt-orderable-desc:hover span.dt-column-order {
  opacity: 0.6;
}
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order { opacity: 1; }
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order {
  opacity: 1;
  transform: translateY(-50%) rotate(180deg);
}

/* ── Indicador de "procesando" ─────────────────────────── */
div.dt-container div.dt-processing {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  transform: translate(-50%, -50%);
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--dt-texto-tenue);
  background: white;
  border-radius: 0.75rem;
  box-shadow: 0 4px 16px rgb(15 23 42 / 0.12);
}

/* ─────────────────────────────────────────────────────────
   RESPONSIVO
   ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  div.dt-container div.dt-layout-row {
    flex-direction: column;
    align-items: stretch;
  }
  div.dt-container div.dt-layout-cell,
  div.dt-container div.dt-layout-cell.dt-layout-start,
  div.dt-container div.dt-layout-cell.dt-layout-end {
    margin: 0;
    justify-content: center;
    width: 100%;
  }
  div.dt-container div.dt-search input.dt-input { width: 100%; }
  div.dt-container div.dt-length label { justify-content: center; width: 100%; }
  div.dt-container div.dt-length select.dt-input { flex: 0 0 auto; }
  div.dt-container div.dt-info { text-align: center; width: 100%; }
  div.dt-container div.dt-paging nav { justify-content: center; width: 100%; }
}

/* Muy estrecho: Anterior y Siguiente se quedan solo con la flecha */
@media (max-width: 420px) {
  div.dt-container div.dt-paging nav > button.dt-paging-button:first-child,
  div.dt-container div.dt-paging nav > button.dt-paging-button:last-child {
    font-size: 0;
    gap: 0;
    padding: 0;
    min-width: 2.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  div.dt-container div.dt-paging button.dt-paging-button,
  div.dt-container div.dt-search input.dt-input,
  div.dt-container div.dt-length select.dt-input,
  table.dataTable thead > tr > th,
  table.dataTable thead > tr > th span.dt-column-order {
    transition: none;
  }
}