/* ============================================================================
   Encabezado UNIFICADO de tablas — STICKY translúcido (vidrio).
   Un solo componente para toda la plataforma. Fijo al recorrer la tabla, fondo
   blanco 78% con desenfoque, y filo+sombra corta cuando hay contenido desplazado
   por encima (estado data-stuck, detectado por IntersectionObserver, sin listener
   de scroll). Las tablas scrollean DENTRO de su caja (max-height) para que el
   sticky se fije de forma fiable y siga soportando scroll horizontal.
   ============================================================================ */
:root{
  --tbl-head-bg:        #EFF5FF;
  --tbl-head-bg-solid:  #EFF5FF;              /* respaldo sin backdrop-filter */
  --tbl-head-blur:      14px;
  --tbl-head-sat:       160%;
  --tbl-head-fg:        #1D4ED8;
  --tbl-head-line:      #DCE7FF;
  --tbl-head-line-on:   #2563EB;              /* filo cuando hay scroll */
  --tbl-head-shadow:    0 8px 14px -12px rgba(15,23,42,.5);
  --tbl-head-h:         44px;
  --app-header-h:       0px;                  /* no hay barra superior fija (el header de vista scrollea) */
}

/* --- Contenedor de scroll interno: hace que el sticky se fije a la caja --- */
#content .rx-scroll, #content .scroll, #content .table-wrap {
  max-height: 70vh; overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* --- Bordes separados: los bordes viajan con la celda sticky (con collapse se desalinean) --- */
#content .rx-scroll table, #content .scroll table, #content .table-wrap table,
.rx-tbl, .data-table, .compact-table, .rpt-table, .rc-cap-table, .dash-table {
  border-collapse: separate !important; border-spacing: 0 !important;
}

/* --- Encabezado sticky translúcido --- */
#content thead th,
.rx-tbl thead th, table thead th, .data-table thead th, .compact-table thead th,
.rpt-table thead th, .rc-cap-table thead th, .dash-table thead th, .x-table thead th, .x-gt-table thead th {
  position: sticky !important;
  top: var(--app-header-h, 0px) !important;
  z-index: 3;

  background: var(--tbl-head-bg) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;

  color: var(--tbl-head-fg) !important;
  height: var(--tbl-head-h);
  text-align: left;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  text-shadow: none;

  border: 0 !important;
  box-shadow: inset 0 -1px 0 var(--tbl-head-line);
  transition: box-shadow 200ms cubic-bezier(.4,0,.2,1);
}

/* --- Estado con contenido desplazado por encima (filo + sombra corta) --- */
[data-stuck="1"] thead th {
  box-shadow: inset 0 -2px 0 var(--tbl-head-line-on), var(--tbl-head-shadow);
}

/* --- Primera columna fija (si existe td.fx/sticky-left): su celda de cabecera por encima --- */
thead th.fx, thead th.sticky-col, thead th:first-child.is-fixed { z-index: 4; }

/* --- Hover de columna: aclarado sutil sin color nuevo --- */
#content thead th:hover, table thead th:hover { background: #E4EDFF !important; }

/* --- Ordenamiento / checkbox / foco --- */
thead th .sort-ind, thead th [class*="sort"] { color: var(--tbl-head-fg) !important; }
thead th.sorted, thead th[aria-sort]:not([aria-sort="none"]) { box-shadow: inset 0 -2px 0 var(--tbl-head-line-on); }
thead th input[type="checkbox"]{ accent-color: var(--tbl-head-fg); }
#content thead th:focus-visible, thead th a:focus-visible, thead th button:focus-visible,
thead th input:focus-visible { outline: 2px solid var(--tbl-head-line-on) !important; outline-offset: -2px; }
/* Filtros embebidos en la cabecera: fondo blanco sólido, texto oscuro */
thead th input:not([type="checkbox"]), thead th select { background:#fff !important; color:#0F172A !important; }

/* --- El encabezado fijo no debe tapar la fila enfocada al navegar con teclado --- */
#content tbody tr { scroll-margin-top: calc(var(--app-header-h) + var(--tbl-head-h)); }

/* --- Respaldo obligatorio si no hay backdrop-filter --- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  #content thead th, table thead th { background: var(--tbl-head-bg-solid) !important; }
}

/* --- Vía de escape global: sustituir el vidrio por fondo opaco en toda la plataforma --- */
body.tbl-head-opaque thead th {
  background: var(--tbl-head-bg-solid) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}

/* --- Movimiento reducido: el estado cambia de golpe, sin transición --- */
@media (prefers-reduced-motion: reduce){ thead th { transition: none !important; } }

/* --- Impresión / exportación: encabezado plano, sin sticky ni vidrio --- */
@media print{
  #content thead th, table thead th {
    position: static !important; background:#fff !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important;
  }
  #content .rx-scroll, #content .scroll { max-height: none !important; overflow: visible !important; }
}

/* --- Íconos por columna: forman una sola unidad con el texto del rótulo --- */
#content thead th .th-label{ display:inline-flex; align-items:center; gap:8px; }
#content thead th .th-label.is-right{ flex-direction:row-reverse; }
#content thead th .th-ic{
  flex:0 0 auto; width:14px; height:14px; opacity:.8;
  transition:opacity 140ms cubic-bezier(.4,0,.2,1);
}
#content thead th:hover .th-ic{ opacity:1; }
@media (prefers-reduced-motion: reduce){ #content thead th .th-ic{ transition:none; } }
@media print{ #content thead th .th-ic{ display:none; } }

/* --- Responsivo al zoom: las tablas rellenan el ancho disponible (sin hueco blanco al alejar) --- */
#content .rx-scroll > table, #content .scroll > table, #content .table-wrap > table,
#content table.rx-tbl, #content table.data-table, #content table.compact-table,
#content table.rpt-table, #content table.rc-cap-table, #content table.dash-table {
  width: 100% !important;
}

/* rx-tbl: volver a tabla real (display:block dejaba el contenido a ancho de contenido -> hueco).
   El scroll horizontal lo maneja el wrapper .rx-scroll (overflow:auto). */
#content table.rx-tbl { display: table !important; overflow: visible !important; }