/* =====================================================================
   WERP · Tema WADAX para Tabulator 6 (tema claro corporativo)
   Se carga SIEMPRE después de vendor/tabulator/tabulator.min.css
   ===================================================================== */

.tabulator {
  background: transparent;
  border: none;
  font-family: var(--f-ui);
  font-size: var(--t-13);
}

/* Cabecera */
.tabulator .tabulator-header {
  background: var(--superficie-2);
  border-bottom: 1px solid var(--linea);
  color: var(--texto-suave);
}
.tabulator .tabulator-header .tabulator-col {
  background: var(--superficie-2);
  border-right: 1px solid var(--linea-suave);
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
  padding: 10px 12px;
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
  font-family: var(--f-datos);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-mudo);
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
  background: #F1EEE6;
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-sorter { color: var(--texto-mudo); }
/* LA CABECERA EN LA MISMA LÍNEA BASE Y LOS RÓTULOS EN RENGLONES (v1.250.0, D-572; Javier, 02/11/2026: «Sale Order se muestra en dos líneas, como en
   Allocator»; «'Importe pendiente' y 'Facturación Total' se muestran en dos líneas»; «la línea base de la cabecera no se mantiene»): la celda de
   cabecera de Tabulator es una columna flex que empieza arriba; con un rótulo de dos renglones al lado, los de uno se quedaban arriba. Pegadas abajo,
   un rótulo de una línea y el segundo renglón de «SALE / ORDER» comparten la línea base. El rótulo en renglones lo pone `cabeceraEnLineas` (el núcleo
   de las columnas que se ajustan): un <br> entre palabra y palabra; el rótulo nunca envuelve por su cuenta (lo de Tabulator) y su columna no baja de
   lo que mide entero (`conSueloYAncho`, el suelo medido en `datagrid.js`). */
.tabulator .tabulator-header .tabulator-col { justify-content: flex-end; }
.tabulator .tabulator-header .tabulator-col .tabulator-col-title .col-cab-lineas { display: inline-block; line-height: 1.25; vertical-align: bottom; }
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-sorter .tabulator-arrow { border-bottom-color: var(--laton-oscuro); }
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-sorter .tabulator-arrow { border-top-color: var(--laton-oscuro); }

/* Cuerpo */
.tabulator .tabulator-tableholder { background: transparent; }
.tabulator .tabulator-tableholder .tabulator-table { background: transparent; color: var(--texto); }

.tabulator-row {
  background: transparent;
  border-bottom: 1px solid var(--linea-suave);
  min-height: 40px;
}
.tabulator-row.tabulator-row-even { background: rgba(40, 34, 18, .015); }
.tabulator-row:hover { background: var(--laton-velo) !important; cursor: pointer; }
.tabulator-row .tabulator-cell {
  border-right: none;
  padding: 10px 12px;
}
/* LO LARGO SE PARTE EN LÍNEAS; LO MONO, NUNCA (v1.250.0, D-572; Javier, 02/11/2026: «el contenido de los campos nombre, producto, cliente, etc. se
   pueden partir en varias líneas»; «el SKU nunca se puede partir en dos líneas»): la celda de Tabulator viene con `nowrap` y puntos suspensivos; aquí
   lo que no cabe se parte en las líneas que hagan falta y la fila crece (Tabulator mide cada fila por su celda más alta; `variableHeight` en
   `datagrid.js` las vuelve a medir al cambiar un ancho). Las cifras, las fechas, los importes y las SKU (`mono`) siguen en una línea, enteros. */
.tabulator-row .tabulator-cell { white-space: normal; overflow-wrap: normal; }   /* v1.251.1 (D-575): por las líneas, nunca por las palabras; datagrid.js no deja la columna más estrecha que su palabra más ancha */
.tabulator-row .tabulator-cell.mono, .tabulator-row .tabulator-cell .mono { white-space: nowrap; overflow-wrap: normal; }

/* Una celda que solo lleva un icono-botón (v1.8.1): sin el relleno de
   texto, o el botón de 30 px no cabe en una columna de 50. Es la columna
   del escritorio de cada proyecto en Tareas y Proyectos → Proyectos. */
.tabulator-row .tabulator-cell.celda-icono { padding: 4px 10px; text-align: center; }
.tabulator-row .tabulator-cell.celda-icono .icono-btn { vertical-align: middle; }

/* Fila archivada (clase propia de WERP) */
.tabulator-row.fila-archivada { opacity: .55; }

/* Mensaje sin resultados */
.tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {
  color: var(--texto-mudo);
  font-size: var(--t-13);
}

/* Pie y paginación */
.tabulator .tabulator-footer {
  background: var(--superficie-2);
  border-top: 1px solid var(--linea);
  color: var(--texto-suave);
  padding: 6px 10px;
}
.tabulator .tabulator-footer .tabulator-footer-contents { flex-wrap: wrap; gap: 6px; }
.tabulator .tabulator-footer .tabulator-page-counter { color: var(--texto-mudo); font-size: var(--t-12); }
.tabulator .tabulator-footer .tabulator-page {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 6px;
  color: var(--texto-suave);
  font-size: var(--t-12);
  margin: 0 2px;
  padding: 4px 9px;
}
.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
  background: var(--laton-velo);
  border-color: var(--linea-fuerte);
  color: var(--texto);
}
.tabulator .tabulator-footer .tabulator-page.active {
  background: var(--laton-velo);
  border-color: var(--laton-oscuro);
  color: var(--laton-texto);
  font-weight: 700;
}
.tabulator .tabulator-footer .tabulator-paginator > label { color: var(--texto-mudo); font-size: var(--t-12); }
.tabulator .tabulator-footer .tabulator-page-size {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 6px;
  color: var(--texto);
  padding: 3px 6px;
}

/* Estado de carga */
.tabulator .tabulator-loader { background: rgba(255, 255, 255, .55); }
.tabulator .tabulator-loader .tabulator-loader-msg {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-1);
  color: var(--texto-suave);
  font-family: var(--f-ui);
  font-size: var(--t-13);
  padding: 10px 16px;
}

/* ——— Árbol BOM en el listado de Productos (v0.10, D-039) ———
   Las filas hijas (componentes del semielaborado) van suavemente
   atenuadas y el caret de Tabulator toma el dorado corporativo. */
.tabulator-row .tabulator-data-tree-control {
  border: 1px solid var(--laton);
  color: var(--laton-texto);
  border-radius: 4px;
  margin-right: 8px;
}
.tabulator-row .tabulator-data-tree-control .tabulator-data-tree-control-expand,
.tabulator-row .tabulator-data-tree-control .tabulator-data-tree-control-collapse {
  background: var(--laton-texto);
}
.tabulator-row .tabulator-data-tree-control .tabulator-data-tree-control-expand:after,
.tabulator-row .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after {
  background: var(--laton-texto);
}
.tabulator-row.fila-linea-bom { background: var(--superficie-2); }
.tabulator-row.fila-linea-bom .tabulator-cell { font-size: var(--t-13); }

/* =====================================================================
   LA VENTANA CON EL TEXTO COMPLETO (v0.74.2)
   ---------------------------------------------------------------------
   Sale al pasar el ratón por una celda o una cabecera cuyo texto no cabe.
   El CSS de Tabulator le da a `.tabulator-tooltip` el fondo blanco y el
   borde gris de sus ventanas genéricas; aquí se viste con el papel de
   WADAX y, sobre todo, SE LE DEJA PARTIR LÍNEAS: una descripción de
   producto de doscientos caracteres en una sola línea se sale de la
   pantalla y no se lee.
   ===================================================================== */
.tabulator-popup-container.tabulator-tooltip {
  background: var(--superficie-3);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-2);
  color: var(--texto);
  font-family: var(--f-ui);
  font-size: var(--t-13);
  line-height: 1.45;
  max-width: min(560px, 90vw);
  padding: 8px 11px;
}
.tabulator-popup-container.tabulator-tooltip .celda-completa {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* EL LISTADO DE PRODUCTOS, MÁS APRETADO A LOS LADOS (v1.45.4, D-294). Javier,
   24/09/2026: «puedes ganar espacio moviendo desde 'tipo' a 'estado' en bloque
   hacia el margen derecho. Incluso puedes estrechar el espacio entre columnas
   bastante». Las columnas de datos miden lo suyo y no crecen; la que crece es
   Nombre (widthGrow 1); y aquí las celdas y las cabeceras llevan 7 px de aire a
   los lados en vez de 12. */
#pro-tabla .tabulator-row .tabulator-cell,
#pro-tabla .tabulator-header .tabulator-col .tabulator-col-content { padding-left: 7px; padding-right: 7px; }
#pro-tabla .tabulator-header .tabulator-col .tabulator-col-content { letter-spacing: .08em; }

/* v1.45.6 (D-296): la fila madre de una familia de placas se distingue de un vistazo: papel cálido y el nombre en negrita;
   sus placas cuelgan debajo, al mismo nivel, cada una con su árbol. */
/* TODO CENTRADO EN VERTICAL (v1.229.0, D-536; Javier, 30/10/2026 con la captura: «ajustes en productos y productos wadax la alineacion
   vertical de los campos. Ahora hay un desajuste»). La celda de Tabulator es un inline-block con el texto arriba (10 px de relleno) y la fila
   mide lo que la celda más alta: la de la SKU, con su botón de copiar de 30 px, cuyo texto queda centrado en esos 30 px, 5 px más abajo que
   el nombre, la línea y los precios. Medido en Chromium con el Tabulator de verdad: los centros iban a 74 (el icono), 80 (la SKU), 75 (el
   resto) y 77 (la chapa) en una fila de 55 a 105; con la celda como inline-flex centrada, todos a 80. Lo de la derecha (los precios) sigue a
   la derecha: Tabulator escribe `text-align` como estilo en línea y aquí se lee. El nombre conserva su recorte con puntos suspensivos. */
#pro-tabla .tabulator-row .tabulator-cell { display: inline-flex; align-items: center; }
#pro-tabla .tabulator-row .tabulator-cell[style*="text-align: right"] { justify-content: flex-end; }
#pro-tabla .tabulator-row .tabulator-cell[style*="text-align: center"], #pro-tabla .tabulator-row .tabulator-cell.celda-icono { justify-content: center; }
#pro-tabla .tabulator-row .tabulator-cell > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pro-tabla .tabulator-row .tabulator-cell > span:not(.mono) { white-space: normal; overflow: visible; text-overflow: clip; }   /* v1.250.0 (D-572): el nombre se parte en líneas, como en todas */

#pro-tabla .tabulator-row.fila-familia { background: var(--laton-velo); }
#pro-tabla .tabulator-row.fila-familia .tabulator-cell[tabulator-field="nombre"] { font-weight: 700; }
#pro-tabla .tabulator-row.fila-familia:hover { background: var(--laton-velo); filter: brightness(.98); }