/* =============================================================================
   DataTables RIS — Hoja de estilos unificada
   Compatible con DataTables 2.x (dt-container, dt-search, dt-paging-button)
   y aliases 1.x (dataTables_wrapper, dataTables_filter, paginate_button).
   Bootstrap 5.3 · data-bs-theme="dark" nativo.
   ============================================================================= */

/* ─── 1. TOKENS ──────────────────────────────────────────────────────────── */
:root {
  --dt-header-bg:               var(--app-primary);
  --dt-header-color:            rgba(255,255,255,.92);
  --dt-header-weight:           600;
  --dt-header-font-size:        .75rem;
  --dt-header-letter-sp:        .06em;

  --dt-row-bg:                  #ffffff;
  --dt-row-alt-bg:              #f8fafb;
  --dt-row-hover-bg:            #eef6f6;
  --dt-row-hover-shadow:        inset 3px 0 0 var(--app-primary);

  --dt-border-color:            var(--bs-border-color);
  --dt-border-radius:           var(--app-radius-lg, .75rem);

  --dt-cell-padding-x:          1rem;
  --dt-cell-padding-y:          .625rem;

  --dt-action-size:             30px;
  --dt-action-icon-size:        1rem;
  --dt-action-gap:              .25rem;

  --dt-badge-radius:            .375rem;

  --dt-toolbar-bg:              transparent;
  --dt-shadow:                  var(--app-shadow-md, 0 2px 8px rgba(0,0,0,.06));

  --dt-pagination-active-bg:    var(--app-primary);
  --dt-pagination-active-color: #fff;
}

[data-bs-theme="dark"] {
  --dt-header-bg:               var(--app-primary); /* en dark mode es el teal claro */
  --dt-header-color:            rgba(0,0,0,.85);

  --dt-row-bg:                  #1a2130;
  --dt-row-alt-bg:              #1e2738;
  --dt-row-hover-bg:            #1f3040;

  --dt-border-color:            #232b36;

  --dt-pagination-active-color: #0b1118;
}

/* ─── 2. WRAPPER / CONTENEDOR ────────────────────────────────────────────── */
/* DT 2.x → .dt-container  |  DT 1.x → .dataTables_wrapper               */
.dt-container,
.dataTables_wrapper {
  border-radius: var(--dt-border-radius);
  overflow: hidden;  /* necesario para que el border-radius recorte el thead */
  box-shadow: var(--dt-shadow);
  background-color: var(--dt-row-bg);
  border: 1px solid var(--dt-border-color);
}
/* Los tooltips viven en body, no dentro del wrapper → overflow:hidden no los afecta */

.card .dt-container,
.card .dataTables_wrapper,
.modal .dt-container,
.modal .dataTables_wrapper {
  box-shadow: none;
  border: none;
}

/* Layout rows DT 2.x */
.dt-layout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .625rem 1rem;
}

/* Row de toolbar (topEnd = search) */
.dt-layout-row:first-child {
  background-color: var(--dt-toolbar-bg);
  border-bottom: 1px solid var(--dt-border-color);
}

/* Row de footer (info + paging) */
.dt-layout-row:last-child {
  background-color: var(--dt-header-bg);
  border-top: 1px solid var(--dt-border-color);
}

.dt-layout-cell { flex: 1 1 auto; }
.dt-layout-cell.dt-layout-end { text-align: right; }
.dt-layout-cell.dt-layout-start { text-align: left; }

/* ─── 3. TOOLBAR ─────────────────────────────────────────────────────────── */
/* DT 2.x: .dt-search / .dt-length  |  DT 1.x: .dataTables_filter / .dataTables_length */

/* Label wrappers */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_buttons {
  padding: .75rem 1rem .5rem;
  background-color: var(--dt-toolbar-bg);
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dt-search label,
.dt-length label {
  font-size: .8125rem;
  color: var(--bs-secondary-color);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 0;
  white-space: nowrap;
}

/* Input de búsqueda — DT 1.x y DT 2.x */
.dataTables_wrapper .dataTables_filter input,
.dt-search input {
  border-radius: var(--app-radius, .5rem);
  border: 1px solid var(--dt-border-color);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-size: .8125rem;
  padding: .375rem .75rem;
  min-width: 240px;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dt-search input:focus {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb), .18);
}

/* Select de longitud */
.dataTables_wrapper .dataTables_length select,
.dt-length select {
  border-radius: var(--app-radius, .5rem);
  border: 1px solid var(--dt-border-color);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-size: .8125rem;
  padding: .25rem .5rem;
}

/* ─── 4. TABLA BASE ──────────────────────────────────────────────────────── */
table.dataTable {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 0 !important;
  font-size: .875rem;
}

table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
  background-color: var(--app-primary) !important;
  color: rgba(255,255,255,.92) !important;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .75rem var(--dt-cell-padding-x);
  border-bottom: 2px solid rgba(255,255,255,.15) !important;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
}

/* Dark mode: teal claro → texto oscuro */
[data-bs-theme="dark"] table.dataTable > thead > tr > th,
[data-bs-theme="dark"] table.dataTable > thead > tr > td {
  background-color: var(--app-primary) !important;
  color: rgba(0,0,0,.82) !important;
}

table.dataTable > tbody > tr > td,
table.dataTable > tbody > tr > th {
  padding: var(--dt-cell-padding-y) var(--dt-cell-padding-x);
  vertical-align: middle;
  border-bottom: 1px solid var(--dt-border-color);
  color: var(--bs-body-color);
  line-height: 1.4;
}

table.dataTable > thead > tr > th:last-child,
table.dataTable > tbody > tr > td:last-child {
  white-space: nowrap;
}

/* ─── 5. FILAS ───────────────────────────────────────────────────────────── */
table.dataTable > tbody > tr {
  background-color: var(--dt-row-bg) !important;
  transition: background-color .14s, box-shadow .14s;
}

table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > td,
table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: var(--dt-row-alt-bg) !important;
  --bs-table-accent-bg: transparent;
}

table.dataTable > tbody > tr:hover > td,
table.dataTable > tbody > tr:hover > th {
  background-color: var(--dt-row-hover-bg) !important;
}

table.dataTable > tbody > tr.selected > td {
  background-color: rgba(var(--app-primary-rgb), .08) !important;
  box-shadow: inset 3px 0 0 var(--app-primary);
}

table.dataTable > tbody > tr:last-child > td {
  border-bottom: none;
}

/* ─── 6. SORT ICONS ──────────────────────────────────────────────────────── */
/*
  DT 1.x: th.sorting / .sorting_asc / .sorting_desc
  DT 2.x: th.dt-orderable + span.dt-column-order::before/::after
          Al ordenar: th.dt-ordering-asc / th.dt-ordering-desc
*/

/* DT 1.x — cursor */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  cursor: pointer;
}

/* DT 2.x — cursor en columnas ordenables */
table.dataTable thead th.dt-orderable-asc,
table.dataTable thead th.dt-orderable-desc {
  cursor: pointer;
}

/* ── DT 1.x sort icons via ::after en el th ── */
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
  font-family: "bootstrap-icons";
  font-size: .75rem;
  opacity: .4;
  margin-left: .35rem;
  vertical-align: middle;
}
table.dataTable thead .sorting::after      { content: "\F127"; } /* bi-arrow-down-up */
table.dataTable thead .sorting_asc::after  { content: "\F128"; opacity: 1; color: rgba(255,255,255,.9); }
table.dataTable thead .sorting_desc::after { content: "\F126"; opacity: 1; color: rgba(255,255,255,.9); }

/* Ocultar ::before que DT puede inyectar */
table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::before {
  display: none !important;
}

/* ── DT 2.x sort icons via span.dt-column-order ── */
/* DT 2.x inyecta <span class="dt-column-order"></span> dentro del th */
table.dataTable thead .dt-column-order {
  display: inline-block;
  margin-left: .35rem;
  vertical-align: middle;
  line-height: 1;
}

/* Ocultar los pseudo-elementos nativos de DT 2.x */
table.dataTable thead .dt-column-order::before,
table.dataTable thead .dt-column-order::after {
  display: none;
}

/* Reemplazar con Bootstrap Icons via ::after del th */
table.dataTable thead th.dt-orderable-asc:not(.dt-ordering-asc):not(.dt-ordering-desc)::after {
  font-family: "bootstrap-icons";
  content: "\F127"; /* bi-arrow-down-up */
  font-size: .75rem;
  opacity: .35;
  margin-left: .35rem;
  vertical-align: middle;
}
table.dataTable thead th.dt-ordering-asc::after {
  font-family: "bootstrap-icons";
  content: "\F128"; /* bi-arrow-up */
  font-size: .75rem;
  opacity: 1;
  color: rgba(255,255,255,.95);
  margin-left: .35rem;
  vertical-align: middle;
}
table.dataTable thead th.dt-ordering-desc::after {
  font-family: "bootstrap-icons";
  content: "\F126"; /* bi-arrow-down */
  font-size: .75rem;
  opacity: 1;
  color: rgba(255,255,255,.95);
  margin-left: .35rem;
  vertical-align: middle;
}

/* ─── 7. FOOTER (info + paginación) ──────────────────────────────────────── */
/* DT 1.x */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  padding: .625rem 1rem;
  font-size: .8125rem;
  color: var(--bs-secondary-color);
  background-color: var(--dt-header-bg);
  border-top: 1px solid var(--dt-border-color);
}

/* DT 2.x */
.dt-container .dt-info,
.dt-container .dt-paging {
  font-size: .8125rem;
  color: var(--bs-secondary-color);
}

/* ─── 8. PAGINACIÓN ──────────────────────────────────────────────────────── */
/* DT 1.x */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--dt-pagination-active-bg) !important;
  color: var(--dt-pagination-active-color) !important;
  border-color: var(--dt-pagination-active-bg) !important;
  border-radius: var(--app-radius-sm, .375rem);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):hover {
  background: rgba(var(--app-primary-rgb), .1) !important;
  color: var(--app-primary) !important;
  border-color: transparent !important;
  border-radius: var(--app-radius-sm, .375rem);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* DT 2.x — botones de paginación */
.dt-paging .dt-paging-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 .5rem;
  font-size: .8125rem;
  border-radius: var(--app-radius-sm, .375rem);
  border: 1px solid transparent;
  background: transparent;
  color: var(--bs-body-color);
  cursor: pointer;
  transition: background-color .12s, color .12s, border-color .12s;
  margin: 0 .1rem;
  line-height: 1;
}
.dt-paging .dt-paging-button:hover:not(.disabled) {
  background: rgba(var(--app-primary-rgb), .1);
  color: var(--app-primary);
}
.dt-paging .dt-paging-button.current,
.dt-paging .dt-paging-button.current:hover {
  background: var(--dt-pagination-active-bg) !important;
  color: var(--dt-pagination-active-color) !important;
  border-color: var(--dt-pagination-active-bg) !important;
}
.dt-paging .dt-paging-button.disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── 9. BOTONES DE ACCIÓN (clases utility para migración progresiva) ─────── */
.dt-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dt-action-size);
  height: var(--dt-action-size);
  border-radius: var(--app-radius-sm, .375rem);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background-color .12s, border-color .12s, color .12s, transform .1s;
  color: var(--bs-secondary-color);
  font-size: var(--dt-action-icon-size);
  line-height: 1;
  vertical-align: middle;
  flex-shrink: 0;
}
.dt-action-btn:hover  { transform: translateY(-1px); }
.dt-action-btn:active { transform: translateY(0); }
.dt-action-btn i { pointer-events: none; }

.dt-action-btn.dt-action-danger        { color: var(--bs-danger); }
.dt-action-btn.dt-action-danger:hover  { background-color: rgba(var(--bs-danger-rgb), .1); border-color: rgba(var(--bs-danger-rgb), .25); }
.dt-action-btn.dt-action-warning       { color: var(--bs-warning); }
.dt-action-btn.dt-action-warning:hover { background-color: rgba(var(--bs-warning-rgb), .12); border-color: rgba(var(--bs-warning-rgb), .3); }
.dt-action-btn.dt-action-primary       { color: var(--app-primary); }
.dt-action-btn.dt-action-primary:hover { background-color: rgba(var(--app-primary-rgb), .1); border-color: rgba(var(--app-primary-rgb), .25); }
.dt-action-btn.dt-action-success       { color: var(--bs-success); }
.dt-action-btn.dt-action-success:hover { background-color: rgba(var(--bs-success-rgb), .1); border-color: rgba(var(--bs-success-rgb), .25); }

.dt-action-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .625rem;
  border-radius: var(--app-radius-sm, .375rem);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
  transition: background-color .12s, border-color .12s, color .12s;
  white-space: nowrap;
  color: var(--app-primary);
}
.dt-action-link:hover {
  background-color: rgba(var(--app-primary-rgb), .1);
  border-color: rgba(var(--app-primary-rgb), .25);
  color: var(--app-primary);
  text-decoration: none;
}

.dt-actions {
  display: flex;
  align-items: center;
  gap: var(--dt-action-gap);
  flex-wrap: nowrap;
}
.dt-actions img {
  width: 22px;
  height: 22px;
  vertical-align: middle;
  opacity: .75;
  transition: opacity .12s;
  cursor: pointer;
}
.dt-actions img:hover { opacity: 1; }

/* ─── 10. BADGES UTILITY (migración progresiva) ──────────────────────────── */
.dt-badge {
  display: inline-block;
  padding: .2em .6em;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .05em;
  border-radius: var(--dt-badge-radius);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
}
.dt-badge-asignado, .dt-badge-assigned {
  background-color: rgba(220, 38, 38, .12);
  color: #b91c1c;
  border: 1px solid rgba(220, 38, 38, .25);
}
.dt-badge-recepcionado, .dt-badge-presente {
  background-color: rgba(22, 163, 74, .1);
  color: #15803d;
  border: 1px solid rgba(22, 163, 74, .2);
}
.dt-badge-cancelado, .dt-badge-ausente {
  background-color: rgba(220, 38, 38, .1);
  color: #b91c1c;
  border: 1px solid rgba(220, 38, 38, .2);
}
.dt-badge-pendiente, .dt-badge-espera {
  background-color: rgba(234, 179, 8, .1);
  color: #a16207;
  border: 1px solid rgba(234, 179, 8, .2);
}
.dt-badge-neutral {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
  border: 1px solid var(--dt-border-color);
}
[data-bs-theme="dark"] .dt-badge-asignado,
[data-bs-theme="dark"] .dt-badge-assigned {
  background-color: rgba(248, 113, 113, .15);
  color: #f87171;
  border-color: rgba(248, 113, 113, .25);
}
[data-bs-theme="dark"] .dt-badge-recepcionado,
[data-bs-theme="dark"] .dt-badge-presente {
  background-color: rgba(74, 222, 128, .15);
  color: #4ade80;
  border-color: rgba(74, 222, 128, .2);
}
[data-bs-theme="dark"] .dt-badge-pendiente,
[data-bs-theme="dark"] .dt-badge-espera {
  background-color: rgba(250, 204, 21, .15);
  color: #facc15;
  border-color: rgba(250, 204, 21, .2);
}

/* ─── 11. DNI / ID badge ─────────────────────────────────────────────────── */
.dt-id-badge {
  display: inline-block;
  padding: .1em .5em;
  font-size: .7rem;
  font-family: var(--app-mono, monospace);
  font-weight: 500;
  border-radius: .375rem;
  background-color: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
  border: 1px solid var(--dt-border-color);
  vertical-align: middle;
  margin-left: .35rem;
  letter-spacing: .02em;
  line-height: 1.5;
}

/* ─── 12. ESTADOS VACÍOS / PROCESANDO ───────────────────────────────────── */
.dataTables_empty {
  text-align: center;
  padding: 3rem 1rem !important;
  color: var(--bs-tertiary-color);
  font-size: .875rem;
}
.dataTables_processing,
.dt-processing {
  background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), .85) !important;
  border: none !important;
  box-shadow: var(--dt-shadow) !important;
  border-radius: var(--app-radius, .5rem) !important;
  color: var(--app-primary) !important;
  font-weight: 600;
  font-size: .875rem;
}

/* ─── 13. RESPONSIVE COLLAPSE ───────────────────────────────────────────── */

/* ── Control cell (la celda que tiene el indicador +/−) ── */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
  cursor: pointer;
  padding-left: 2.5rem !important; /* espacio para el indicador */
  position: relative;
}

/* ── Indicador circular con + ── */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
  /* Posición */
  position: absolute;
  left: .65rem;
  top: 50%;
  transform: translateY(-50%);
  /* Forma */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  /* Color */
  background-color: var(--app-primary) !important;
  border: none !important;
  color: #fff;
  /* Ícono + via Bootstrap Icons (alternativa: content simple) */
  content: "+";
  font-size: .8rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(var(--app-primary-rgb), .35);
  transition: background-color .14s, transform .14s, box-shadow .14s;
}

/* Hover sobre la fila colapsada */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:hover::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:hover::before {
  background-color: var(--app-primary-600, #0a5e5e) !important;
  box-shadow: 0 2px 8px rgba(var(--app-primary-rgb), .45);
  transform: translateY(-50%) scale(1.1);
}

/* ── Fila expandida — indicador cambia a − ── */
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control::before {
  content: "−";
  background-color: var(--app-primary-600, #0a5e5e) !important;
}

/* ── Child row (la fila que se expande) ── */
table.dataTable > tbody > tr.child {
  background-color: var(--dt-row-bg) !important;
}

table.dataTable > tbody > tr.child td.child {
  padding: 0 !important;
  border-bottom: 1px solid var(--dt-border-color);
}

/* ── Panel de detalles ── */
table.dataTable > tbody > tr.child ul.dtr-details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .5rem 1.5rem;
  padding: .875rem 1.25rem .875rem 2.5rem;
  margin: 0;
  list-style: none;
  background-color: rgba(var(--app-primary-rgb), .04);
  border-left: 3px solid var(--app-primary);
}

[data-bs-theme="dark"] table.dataTable > tbody > tr.child ul.dtr-details {
  background-color: rgba(var(--app-primary-rgb), .07);
}

table.dataTable > tbody > tr.child ul.dtr-details li {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: 0;
  border: none;
}

/* Etiqueta de columna */
table.dataTable > tbody > tr.child ul.dtr-details li span.dtr-title {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--app-primary);
  opacity: .8;
  line-height: 1.2;
}

/* Valor */
table.dataTable > tbody > tr.child ul.dtr-details li span.dtr-data {
  font-size: .83rem;
  color: var(--bs-body-color);
  line-height: 1.4;
}

/* Badges dentro del child row */
table.dataTable > tbody > tr.child ul.dtr-details li span.dtr-data .badge {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .05em;
}

/* ─── 14. SCROLLBAR ─────────────────────────────────────────────────────── */
.dataTables_scrollBody::-webkit-scrollbar { height: 5px; }
.dataTables_scrollBody::-webkit-scrollbar-track { background: var(--bs-secondary-bg); }
.dataTables_scrollBody::-webkit-scrollbar-thumb { background: var(--dt-border-color); border-radius: 99px; }
.dataTables_scrollBody::-webkit-scrollbar-thumb:hover { background: var(--bs-tertiary-color); }

/* ─── 15. UTILIDADES ────────────────────────────────────────────────────── */
table.dataTable td.dt-right, table.dataTable th.dt-right { text-align: right; }
table.dataTable td.dt-center, table.dataTable th.dt-center { text-align: center; }

.dt-cell-sub {
  display: block;
  font-size: .75rem;
  color: var(--bs-secondary-color);
  line-height: 1.3;
  margin-top: .1rem;
}
.dt-mono {
  font-family: var(--app-mono, monospace);
  font-size: .8125rem;
  letter-spacing: .02em;
}
.dt-search-input {
  border-radius: var(--app-radius, .5rem);
  border: 1px solid var(--dt-border-color);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-size: .875rem;
  padding: .5rem .875rem .5rem 2.5rem;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
  outline: none;
}
.dt-search-input:focus {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb), .18);
}
.dt-search-wrapper { position: relative; }
.dt-search-wrapper .dt-search-icon {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bs-tertiary-color);
  font-size: 1rem;
  pointer-events: none;
}

/* ─── 16. TOOLTIPS ──────────────────────────────────────────────────────── */
.tooltip { z-index: 1080; }

/* =============================================================================
   17. OVERRIDES DEL HTML GENERADO POR PHP
   Aplican sobre el HTML exacto que produce el sistema sin cambiar lógica PHP.
   ============================================================================= */

/* ── 17a. Badges Bootstrap (lis_recepcionados.php)
   PHP: <span class="badge text-bg-danger">ASIGNADO</span>
   Bootstrap pone !important en color y background-color → necesitamos más especificidad
   ──────────────────────────────────────────────────────────────────────────── */
table.dataTable td .badge.text-bg-danger {
  background-color: rgba(220, 38, 38, .12) !important;
  color: #b91c1c !important;
  border: 1px solid rgba(220, 38, 38, .25);
  font-size: .6875rem;
  letter-spacing: .05em;
  font-weight: 700;
}
[data-bs-theme="dark"] table.dataTable td .badge.text-bg-danger {
  background-color: rgba(248, 113, 113, .15) !important;
  color: #f87171 !important;
  border-color: rgba(248, 113, 113, .25);
}

table.dataTable td .badge.text-bg-success {
  background-color: rgba(22, 163, 74, .12) !important;
  color: #15803d !important;
  border: 1px solid rgba(22, 163, 74, .25);
  font-size: .6875rem;
  letter-spacing: .05em;
  font-weight: 700;
}
[data-bs-theme="dark"] table.dataTable td .badge.text-bg-success {
  background-color: rgba(74, 222, 128, .15) !important;
  color: #4ade80 !important;
  border-color: rgba(74, 222, 128, .25);
}

table.dataTable td .badge.text-bg-warning {
  background-color: rgba(234, 179, 8, .12) !important;
  color: #854d0e !important;
  border: 1px solid rgba(234, 179, 8, .3);
  font-size: .6875rem;
  letter-spacing: .05em;
  font-weight: 700;
}
[data-bs-theme="dark"] table.dataTable td .badge.text-bg-warning {
  background-color: rgba(250, 204, 21, .15) !important;
  color: #facc15 !important;
  border-color: rgba(250, 204, 21, .3);
}

table.dataTable td .badge.text-bg-primary {
  background-color: rgba(var(--app-primary-rgb), .12) !important;
  color: var(--app-primary) !important;
  border: 1px solid rgba(var(--app-primary-rgb), .25);
  font-size: .6875rem;
  letter-spacing: .05em;
  font-weight: 700;
}

table.dataTable td .badge.text-bg-secondary {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-secondary-color) !important;
  border: 1px solid var(--dt-border-color);
  font-size: .6875rem;
  letter-spacing: .05em;
  font-weight: 700;
}

/* ── 17b. Badges con inline style (lis_bus_tur_est_listado.php)
   PHP: <span class="badge" style="background-color:#ffe9f0;color:#C70039;...">
   El !important es obligatorio por el inline style. Escopo estricto a table.dataTable.
   ──────────────────────────────────────────────────────────────────────────── */
table.dataTable td .badge[style] {
  font-size: .6875rem !important;
  letter-spacing: .05em;
  font-weight: 700;
  border-radius: var(--dt-badge-radius) !important;
  padding: .22em .6em !important;
  line-height: 1.4;
}

/* ASIGNADO: rojo/danger — es el fallback (se aplica cuando el color es peligro) */
table.dataTable td .badge[style*="#ffe9f0"],
table.dataTable td .badge[style*="C70039"],
table.dataTable td .badge[style*="c70039"] {
  background-color: rgba(220, 38, 38, .1) !important;
  color: #b91c1c !important;
  border: 1px solid rgba(220, 38, 38, .2) !important;
}

/* RECEPCIONADO: verde */
table.dataTable td .badge[style*="#98FB98"],
table.dataTable td .badge[style*="98fb98"],
table.dataTable td .badge[style*="006400"] {
  background-color: rgba(22, 163, 74, .1) !important;
  color: #15803d !important;
  border: 1px solid rgba(22, 163, 74, .2) !important;
}
[data-bs-theme="dark"] table.dataTable td .badge[style*="#98FB98"],
[data-bs-theme="dark"] table.dataTable td .badge[style*="006400"] {
  background-color: rgba(74, 222, 128, .15) !important;
  color: #4ade80 !important;
  border-color: rgba(74, 222, 128, .2) !important;
}

/* EN CURSO: amarillo */
table.dataTable td .badge[style*="FFFFE0"],
table.dataTable td .badge[style*="ffffe0"],
table.dataTable td .badge[style*="E2B93B"],
table.dataTable td .badge[style*="e2b93b"] {
  background-color: rgba(234, 179, 8, .1) !important;
  color: #a16207 !important;
  border: 1px solid rgba(234, 179, 8, .2) !important;
}

/* REALIZADO: teal */
table.dataTable td .badge[style*="E0FFFF"],
table.dataTable td .badge[style*="e0ffff"],
table.dataTable td .badge[style*="0C4DFF"],
table.dataTable td .badge[style*="0c4dff"] {
  background-color: rgba(var(--app-primary-rgb), .1) !important;
  color: var(--app-primary) !important;
  border: 1px solid rgba(var(--app-primary-rgb), .2) !important;
}

/* CANCELADOS / PENDIENTE: neutro */
table.dataTable td .badge[style*="D3D3D3"],
table.dataTable td .badge[style*="d3d3d3"],
table.dataTable td .badge[style*="2F4F4F"],
table.dataTable td .badge[style*="FFB6C1"],
table.dataTable td .badge[style*="650487"] {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-secondary-color) !important;
  border: 1px solid var(--dt-border-color) !important;
}

/* ── 17c. Normalizar TODOS los badges dentro de tabla ─────────────────────── */
table.dataTable td .badge {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .05em;
  border-radius: var(--dt-badge-radius);
  padding: .22em .6em;
  white-space: nowrap;
  line-height: 1.4;
}

/* ── 17d. Link "RECEPCIONAR" — <a class="text-info fw-bold"> ────────────── */
/*
   Estilo de chip/pill destacado para distinguirlo visualmente de los iconos SVG.
   El span padre tiene class="cursor-pointer float-end" — neutralizamos el float
   en 17f y aquí le damos identidad propia al chip.
*/
table.dataTable td a.text-info.fw-bold,
table.dataTable td .cursor-pointer > a.text-info {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .28rem .7rem;
  border-radius: 99px;            /* pill completo */
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-decoration: none;
  border: 1.5px solid var(--app-primary);
  color: var(--app-primary) !important;
  background: rgba(var(--app-primary-rgb), .07);
  transition: background-color .14s, color .14s, border-color .14s;
  white-space: nowrap;
  text-transform: uppercase;
}
table.dataTable td a.text-info.fw-bold:hover,
table.dataTable td .cursor-pointer > a.text-info:hover {
  background-color: var(--app-primary);
  color: #fff !important;
  border-color: var(--app-primary);
  text-decoration: none;
}

/* ── 17e. Acciones con SVG — <span class="cursor-pointer"> ─────────────── */
table.dataTable td span.cursor-pointer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--app-radius-sm, .375rem);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .12s, border-color .12s, transform .1s;
  vertical-align: middle;
  flex-shrink: 0;
}
table.dataTable td span.cursor-pointer:hover {
  background-color: var(--bs-secondary-bg);
  border-color: var(--dt-border-color);
  transform: translateY(-1px);
}
table.dataTable td span.cursor-pointer:active {
  transform: translateY(0);
}
table.dataTable td span.cursor-pointer img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  display: block;
}

/* ── 17f. Celda de acciones — flex row para que nada se pise ─────────────── */
table.dataTable td:last-child {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: 140px;
}

/* Separador visual entre iconos y pill RECEPCIONAR */
table.dataTable td:last-child span.cursor-pointer.float-end {
  float: none !important;
  margin-left: .3rem !important; /* pequeña separación extra antes del pill */
}

table.dataTable td:last-child span.cursor-pointer,
table.dataTable td:last-child a.text-info,
table.dataTable td:last-child .dt-action-btn,
table.dataTable td:last-child .dt-action-link {
  flex-shrink: 0;
}

/* El span que envuelve RECEPCIONAR no tiene dimensiones fijas (es un span genérico) */
table.dataTable td:last-child span.cursor-pointer:has(> a.text-info) {
  width: auto;
  height: auto;
  border: none;
  background: transparent;
  padding: 0;
}

/* ── 17g. Botón "VOLVER A RECEPCIONAR" (estado C cancelados) ─────────────── */
table.dataTable td .btn.btn-outline-primary.btn-sm {
  font-size: .7rem;
  padding: .2rem .55rem;
  border-radius: var(--app-radius-sm, .375rem);
  white-space: nowrap;
}

/* ── 17h. Badge de DNI inline (apellido + badge bg-secondary) ────────────── */
table.dataTable td .badge.bg-secondary {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .03em;
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-secondary-color) !important;
}

/* =============================================================================
   18. INDICADORES DE FIRMANTE / SOLICITANTE  (carga_prestaciones.php y similares)
   PHP genera: style="background-color: var(--bs-danger)" en td.prf_fir_nombre
   El box-shadow inset de Bootstrap 5 (.table hover/striped) tapa el background
   inline. Forzamos con !important + paleta pastel + borde izquierdo acento.
   El selector [style*="bs-danger"] detecta el valor sin tocar lógica PHP.
   ============================================================================= */

/*
  Tres fuentes de color para estas celdas:
  1. PHP inicial:    style="background-color: var(--bs-danger)"    → [style*="bs-danger"]
  2. JS jQuery:      .css('#FF2C46') → browser normaliza a rgb(255, 44, 70)
                     .css('#289E48') → browser normaliza a rgb(40, 158, 72)
  jQuery convierte hex a rgb() al escribir en el atributo style —
  los selectores hex nunca matchean; hay que usar los valores rgb resultantes.
*/

/* — Requisito incompleto (rojo) — */
td.prf_fir_nombre[style*="bs-danger"],
td.prf_sol_nombre[style*="bs-danger"],
td.prf_fir_nombre[style*="255, 44, 70"],
td.prf_sol_nombre[style*="255, 44, 70"],
td.prf_fir_nombre[style*="255,44,70"],
td.prf_sol_nombre[style*="255,44,70"] {
  background-color: rgba(220, 38, 38, .12) !important;
  color: #b91c1c !important;
  box-shadow: none !important;
  border-left: 3px solid #dc3545 !important;
  font-size: .75rem;
  font-weight: 600;
}

/* — Requisito completo (verde) — */
td.prf_fir_nombre[style*="bs-success"],
td.prf_sol_nombre[style*="bs-success"],
td.prf_fir_nombre[style*="40, 158, 72"],
td.prf_sol_nombre[style*="40, 158, 72"],
td.prf_fir_nombre[style*="40,158,72"],
td.prf_sol_nombre[style*="40,158,72"] {
  background-color: rgba(22, 163, 74, .12) !important;
  color: #15803d !important;
  box-shadow: none !important;
  border-left: 3px solid #198754 !important;
  font-size: .75rem;
  font-weight: 600;
}

/* — Dark mode — */
[data-bs-theme="dark"] td.prf_fir_nombre[style*="bs-danger"],
[data-bs-theme="dark"] td.prf_sol_nombre[style*="bs-danger"],
[data-bs-theme="dark"] td.prf_fir_nombre[style*="255, 44, 70"],
[data-bs-theme="dark"] td.prf_sol_nombre[style*="255, 44, 70"],
[data-bs-theme="dark"] td.prf_fir_nombre[style*="255,44,70"],
[data-bs-theme="dark"] td.prf_sol_nombre[style*="255,44,70"] {
  background-color: rgba(248, 113, 113, .13) !important;
  color: #f87171 !important;
  border-left-color: #f87171 !important;
}
[data-bs-theme="dark"] td.prf_fir_nombre[style*="bs-success"],
[data-bs-theme="dark"] td.prf_sol_nombre[style*="bs-success"],
[data-bs-theme="dark"] td.prf_fir_nombre[style*="40, 158, 72"],
[data-bs-theme="dark"] td.prf_sol_nombre[style*="40, 158, 72"],
[data-bs-theme="dark"] td.prf_fir_nombre[style*="40,158,72"],
[data-bs-theme="dark"] td.prf_sol_nombre[style*="40,158,72"] {
  background-color: rgba(74, 222, 128, .13) !important;
  color: #4ade80 !important;
  border-left-color: #4ade80 !important;
}