/* ==========================================================
   xl-table.css - tabla estilo Excel sin DataTables
   Encabezados fijos + scroll horizontal + columnas congeladas
   ========================================================== */

.xl-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  font-size: 13px;
}
/* Orden visual: contador y boton a la izquierda, buscador a la derecha */
.xl-toolbar .xl-info { order: 1; color: #666; }
.xl-toolbar .xl-clear-all {
  order: 2;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
.xl-toolbar .xl-clear-all[disabled] { opacity: .45; cursor: default; }

/* Buscador: derecha, mas grande y gris */
.xl-toolbar input[type="search"].xl-global {
  order: 3;
  margin-left: auto;              /* lo empuja a la derecha */
  width: 380px;                   /* ancho: cambialo aqui si lo quieres mas grande */
  max-width: 100%;
  height: 40px;
  padding: 6px 12px 6px 36px;
  font-size: 15px;
  color: #333;
  background: #e9ecef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 12px center;
  border: 1px solid #b8bec6;
  border-radius: 6px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}
.xl-toolbar input[type="search"].xl-global::placeholder { color: #6c757d; }
.xl-toolbar input[type="search"].xl-global:focus {
  outline: none;
  background-color: #fff;
  border-color: #496cad;
  box-shadow: 0 0 0 3px rgba(73,108,173,.2);
}

/* Contenedor unico de scroll: el encabezado y el cuerpo viven en la MISMA
   tabla, asi que nunca se pueden desalinear (sidebar, carga lenta, resize...). */
.xl-wrap {
  position: relative;
  overflow: auto;
  max-height: var(--xl-max-height, 75vh);
  border: 1px solid #d0d7de;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

.xl-table {
  border-collapse: separate !important; /* necesario para que sticky pinte bordes */
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  margin: 0 !important;
}

/* ---------- Cuerpo ----------
   Triple clase = mas especifico que el tema (.table-primary tbody tr:nth-child...)
   SIN !important en el fondo, para que los colores inline del semaforo
   (Index, Demanda semanal) se sigan respetando. */
.xl-table.xl-table.xl-table tbody > tr > th,
.xl-table.xl-table.xl-table tbody > tr > td {
  background: #fff;
  border: 0 !important;
  border-right: 1px solid #e5e5e5 !important;
  border-bottom: 1px solid #e5e5e5 !important;
  box-shadow: none;
  vertical-align: middle;
}
.xl-table.xl-table.xl-table tbody > tr.xl-alt > th,
.xl-table.xl-table.xl-table tbody > tr.xl-alt > td { background: #f9fafc; }
.xl-table.xl-table.xl-table tbody > tr:hover > th,
.xl-table.xl-table.xl-table tbody > tr:hover > td { background: #e9eef7; }

/* ---------- Encabezado fijo ----------
   No se toca el color: lo sigue poniendo tu tema (.table-primary thead th,
   azul #496CAD con texto blanco en blue-gray.css). Si cambias el color del
   tema, el encabezado lo toma solo. */
.xl-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  white-space: nowrap;
  vertical-align: middle !important;
  padding: 8px 8px !important;
  border: 0 !important;
  border-right: 1px solid rgba(255,255,255,.25) !important;
  border-bottom: 2px solid rgba(0,0,0,.3) !important;
}
.xl-th {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.xl-label { line-height: 1.2; text-align: left; }   /* los <br> del PHP se respetan */

/* Zona clicable para ordenar (nombre + flechas) */
.xl-sortzone {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  cursor: pointer;
  user-select: none;
}
.xl-sorter {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  flex: 0 0 auto;
}
.xl-sorter i {
  display: block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  opacity: .4;
}
.xl-sorter .xl-up { border-bottom: 5px solid currentColor; }
.xl-sorter .xl-dn { border-top: 5px solid currentColor; }
.xl-sortzone:hover .xl-sorter i { opacity: .8; }
.xl-sorter.xl-asc .xl-up, .xl-sorter.xl-desc .xl-dn { opacity: 1; }
.xl-sorter.xl-asc .xl-dn, .xl-sorter.xl-desc .xl-up { opacity: .15; }

/* Boton tipo Excel  (blanco sobre el azul del encabezado) */
.xl-btn {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,.25);
  border-radius: 3px;
  background: #fff;
  color: #333;
  cursor: pointer;
}
.xl-btn:hover { background: #eef3fb; }
.xl-btn svg { width: 12px; height: 12px; display: block; }
.xl-btn.xl-active { background: #fff3c4; border-color: #b58900; color: #7a5b00; }

/* ---------- Columnas congeladas (izquierda) ---------- */
.xl-table .xl-frozen { position: sticky; z-index: 2; }
.xl-table thead th.xl-frozen { z-index: 4; }          /* esquina superior izquierda */
.xl-table .xl-frozen-last { box-shadow: 3px 0 4px -2px rgba(0,0,0,.18) !important; }

/* ---------- Menu de filtro ---------- */
.xl-menu {
  position: fixed;
  z-index: 10000;
  width: 290px;
  max-height: calc(100vh - 16px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #b9bec7;
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  font-size: 13px;
  color: #222;
  user-select: none;
  overflow: hidden;
}
/* Parte con scroll: opciones, filtros, buscador y lista */
.xl-menu .xl-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.xl-menu .xl-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
.xl-menu .xl-item:hover { background: #e8eefc; }
.xl-menu .xl-item.xl-disabled { color: #aaa; cursor: default; background: none; }
.xl-menu .xl-item.xl-on { font-weight: 600; }
.xl-menu .xl-sep { height: 1px; background: #e1e4e8; margin: 3px 0; }
.xl-menu .xl-ico { width: 16px; text-align: center; font-size: 12px; }

.xl-cond { padding: 6px 10px; display: none; gap: 6px; flex-direction: column; background: #fafbfc; }
.xl-cond.xl-open { display: flex; }
.xl-cond select, .xl-cond input {
  height: 28px; padding: 2px 6px; border: 1px solid #ccc; border-radius: 3px; width: 100%;
}
.xl-cond .xl-row2 { display: flex; gap: 6px; }

.xl-search { padding: 6px 10px; }
.xl-search input {
  width: 100%; height: 28px; padding: 2px 8px; border: 1px solid #ccc; border-radius: 3px;
}
.xl-list {
  margin: 0 10px;
  border: 1px solid #d0d7de;
  overflow: auto;
  min-height: 100px;
  max-height: 240px;
  padding: 4px 0;
}
.xl-list label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 2px 8px;
  font-weight: normal;
  white-space: nowrap;
  cursor: pointer;
}
.xl-list label:hover { background: #f0f4fb; }
.xl-list .xl-empty { padding: 8px; color: #888; }
/* Aceptar / Cancelar: siempre visibles abajo del menu */
.xl-foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid #e1e4e8;
  background: #fff;
}
.xl-foot button {
  min-width: 84px; height: 32px; border: 1px solid #b9bec7; border-radius: 3px; background: #fff; cursor: pointer;
}
.xl-foot .xl-ok { border-color: #3b73d1; background: #3b73d1; color: #fff; }

/* ---------- Celular / pantallas chicas ---------- */
.xl-menu.xl-menu-sm { font-size: 15px; }
.xl-menu.xl-menu-sm .xl-item { padding: 10px 14px; }
.xl-menu.xl-menu-sm .xl-list { max-height: none; min-height: 140px; }
.xl-menu.xl-menu-sm .xl-list label { padding: 7px 10px; }
.xl-menu.xl-menu-sm .xl-cond select,
.xl-menu.xl-menu-sm .xl-cond input,
.xl-menu.xl-menu-sm .xl-search input { height: 40px; font-size: 16px; } /* 16px evita el zoom automatico de iPhone */
.xl-menu.xl-menu-sm .xl-foot button { flex: 1; height: 44px; font-size: 16px; }
@media (max-width: 600px) {
  .xl-toolbar input[type="search"].xl-global { width: 100%; margin-left: 0; }
}

/* ---------- Tabla en celular (parado o acostado) ----------
   Pantalla angosta (< 768 px) o baja (< 500 px de alto, celular acostado):
   - sin scroll interno: la pagina hace el scroll vertical y la tabla solo se desliza de lado
   - encabezado no fijo y sin columnas congeladas (el JS tampoco las calcula)
   - filas mas compactas (imagen de 42 px)
   En PC y tablet no cambia nada. */
@media (max-width: 767px), (max-height: 500px) {
  .xl-wrap { max-height: none !important; }
  .xl-table thead th { position: static !important; }
  .xl-table .xl-frozen { position: static !important; left: auto !important; box-shadow: none !important; }
  .xl-table img.img-thumbnail { width: 42px !important; height: auto !important; padding: 2px !important; }
  .xl-table.xl-table.xl-table tbody > tr > th,
  .xl-table.xl-table.xl-table tbody > tr > td { padding: 5px 6px !important; }
}