/* ============================================================
 * CSS del módulo "warehouse" para el skin "sky".
 * Este archivo es un SUSTITUTO COMPLETO del CSS normal del
 * módulo cuando el skin activo es "sky" (no una capa de
 * ajustes encima) -- se carga en su lugar, nunca junto a él.
 * Edítalo libremente para dar a este módulo un aspecto
 * específico de este skin (incluye layout/estructura, no solo
 * colores). Ver también: assets/css/base.css (tokens/variables
 * por skin+modo).
 * ============================================================ */

/* ===================== ALMACÉN =====================
   Usa los tokens de espaciado/tipografía de base.css (--space-*,
   --font-size-*, --control-height-*, --tab-*) para que este módulo se
   sienta del mismo sistema que Laboral: mismos números, no "parecidos". */
.wh-layout { display: grid; gap: var(--space-4); }
.wh-panel { padding: var(--space-4) var(--space-5) var(--space-6); overflow: visible; }
.wh-content { margin-top: var(--space-4); min-height: 240px; }
.wh-loading { padding: 40px 0; text-align: center; color: var(--text-soft); font-weight: 700; }
.wh-muted { color: var(--text-soft); }
.wh-nowrap { white-space: nowrap; }
.wh-prewrap { white-space: pre-wrap; margin: 4px 0 12px; }
.wh-mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .02em; }
.wh-pos { color: #157a52; }
.wh-neg { color: #b32626; }
.wh-warn { color: #b45309; }

/* Cabecera: buscador de códigos */
.wh-scan { margin-left: auto; }
.wh-scan .input { min-height: 32px; width: min(280px, 46vw); padding: 2px 12px; font-size: .82rem; background: rgba(255, 255, 255, .95); }

/* Pestañas: mismo alto/padding que el resto de la app (--tab-height,
   --tab-padding-x), para que se sientan iguales que las de Laboral. */
.wh-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) 0 0; }
.wh-tab.is-active { background: var(--brand-fill-gradient) !important; color: #fff !important; }
.wh-tab .app-icon { width: 17px; height: 17px; }

.wh-toast { margin: 12px 0 0; }
.wh-toast[hidden] { display: none; }

/* Barra de herramientas y filtros */
.wh-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.wh-toolbar__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); flex: 1 1 auto; min-width: 0; }
.wh-toolbar__filters .input { min-height: var(--control-height-sm); padding: var(--space-2) var(--space-4); font-size: var(--font-size-sm); width: auto; max-width: 100%; }
.wh-toolbar__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.wh-w-lg { width: 260px !important; }
.wh-w-date { width: 140px !important; min-height: 32px !important; }
.wh-w-num { width: 100px !important; }
.wh-inline { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--text-soft); }
.wh-btn { display: inline-flex; align-items: center; gap: 6px; }
.wh-btn .app-icon { width: 15px; height: 15px; }
.wh-check { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 600; cursor: pointer; }
.wh-check input { width: 17px; height: 17px; }
.wh-check--small { font-size: .74rem; }

.wh-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.wh-chipbtn { border: 1px solid var(--border); background: var(--surface-soft); color: var(--primary-dark); padding: 5px 11px; border-radius: 3px; font-size: .78rem; font-weight: 700; cursor: pointer; }
.wh-chipbtn:hover { background: var(--surface-hover); }
.wh-chipbtn.is-active { background: var(--brand-fill-gradient); border-color: transparent; color: #fff; }

/* Badges */
.wh-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 3px; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.wh-badge--in { background: var(--success-soft); color: var(--success-soft-ink); }
.wh-badge--out { background: var(--danger-soft-tint); color: var(--danger-soft-ink); }
.wh-badge--warn { background: var(--warning-soft); color: var(--warning-soft-ink); }
.wh-badge--info { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary-dark); }
.wh-badge--transfer { background: color-mix(in srgb, var(--fichaje-request) 15%, var(--surface)); color: var(--fichaje-request-dark); }
.wh-badge--adjust { background: #e0f7f4; color: #0f766e; }
.wh-badge--muted { background: #eceff4; color: #475569; }
.wh-reason { display: inline-block; padding: 2px 8px; border-left: 3px solid var(--c, #64748b); background: color-mix(in srgb, var(--c, #64748b) 12%, white); font-size: .76rem; font-weight: 700; border-radius: 0 3px 3px 0; }
.wh-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* Tablas: fila NO interactiva → puede ir más ajustada que un control
   clicable (no hace falta reservar zona táctil de 32-38px en una celda). */
.wh-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.wh-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-base); }
.wh-table th { padding: var(--space-3) var(--space-4); background: var(--surface-soft); color: var(--primary-dark); font-size: var(--font-size-xs); letter-spacing: .08em; text-transform: uppercase; text-align: left; white-space: nowrap; }
.wh-table td { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); vertical-align: middle; }
.wh-table tbody tr:hover { background: var(--surface-hover); }
.wh-row-click { cursor: pointer; }
.wh-t-right { text-align: right !important; }
.wh-t-center { text-align: center !important; }
.wh-sub { display: block; font-size: .72rem; color: var(--text-soft); font-weight: 500; margin-top: 1px; }
.wh-prodname { font-weight: 700; color: var(--text); }
.wh-link { color: var(--primary); font-weight: 700; text-decoration: none; }
.wh-link:hover { text-decoration: underline; }
.wh-link--btn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 800; }
.wh-rowbtns { display: inline-flex; gap: 4px; }
.wh-icon-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); background: var(--surface-soft); border-radius: 3px; cursor: pointer; color: var(--primary-dark); }
.wh-icon-btn:hover { background: var(--surface-hover); }
.wh-icon-btn .app-icon { width: 15px; height: 15px; }
.wh-icon-btn--danger { color: var(--danger-soft-ink); border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: var(--danger-soft-tint); }
.wh-icon-btn--danger:hover { background: #fad4d4; }

.wh-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; font-size: .82rem; font-weight: 700; }
.wh-pager__info { margin-right: auto; color: var(--text-soft); }

.wh-summarybar { display: flex; flex-wrap: wrap; gap: 18px; margin: -4px 0 12px; padding: 8px 14px; background: var(--surface-soft); border-left: 4px solid var(--primary); border-radius: 3px; font-size: .84rem; color: var(--text); }
.wh-summarybar:empty { display: none; }

/* Estado vacío */
.wh-empty { display: grid; justify-items: center; gap: 6px; padding: 34px 12px; text-align: center; color: var(--text-soft); background: var(--surface-soft); border: 1px dashed var(--border); border-radius: 3px; }
.wh-empty__icon .app-icon { width: 34px; height: 34px; opacity: .45; }
.wh-empty strong { color: var(--text); }

/* KPIs */
.wh-quick { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.wh-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.wh-kpis--compact { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: var(--space-4) 0; }
.wh-kpi { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--surface); border: 0; border-left: 4px solid var(--k, var(--primary)); border-radius: var(--radius); box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 9%, transparent); text-align: left; cursor: pointer; font: inherit; color: inherit; }
.wh-kpis--compact .wh-kpi { cursor: default; display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); box-shadow: none; border: 1px solid var(--border); border-left: 4px solid var(--k, var(--primary)); }
.wh-kpis--compact .wh-kpi span { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.wh-kpis--compact .wh-kpi strong { font-size: 1.1rem; }
button.wh-kpi:hover { box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 16%, transparent); transform: translateY(-1px); }
.wh-kpi--blue { --k: var(--primary); } .wh-kpi--green { --k: #22b27a; } .wh-kpi--amber { --k: #e0a100; } .wh-kpi--red { --k: #dc2626; }
.wh-kpi__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 3px; background: color-mix(in srgb, var(--k) 14%, white); flex: none; }
.wh-kpi__icon .app-icon { width: 21px; height: 21px; }
.wh-kpi__body { display: grid; min-width: 0; }
.wh-kpi__body small { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.wh-kpi__body strong { font-size: 1.45rem; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--text); }
.wh-kpi__body em { font-style: normal; font-size: .72rem; color: var(--text-soft); }

/* Tarjetas del resumen */
.wh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--space-4); }
.wh-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4) var(--space-5); box-shadow: 0 3px 12px color-mix(in srgb, var(--primary) 6%, transparent); min-width: 0; }
.wh-card--wide { grid-column: 1 / -1; }
.wh-card--section { margin-bottom: var(--space-4); }
.wh-card h3 { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); font-size: var(--font-size-md); }
.wh-card h3 .app-icon { width: 18px; height: 18px; }
.wh-list { display: grid; gap: 4px; }
.wh-list__item { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 10px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 3px; cursor: pointer; font: inherit; text-align: left; color: inherit; font-size: .84rem; }
.wh-list__item:hover { background: var(--surface-hover); }
.wh-list__item > span:last-child { white-space: nowrap; font-weight: 700; }
.wh-bars { display: grid; gap: 9px; }
.wh-bar { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; align-items: center; gap: 10px; font-size: .82rem; }
.wh-bar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.wh-bar__track { height: 10px; background: var(--surface-soft); border-radius: 3px; overflow: hidden; }
.wh-bar__track i { display: block; height: 100%; border-radius: 3px; }

/* Árbol de categorías + contenido */
.wh-split { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; align-items: start; }
.wh-split__main { min-width: 0; }
.wh-tree { background: var(--surface-soft); border: 1px solid var(--border); border-radius: 3px; padding: 8px; display: grid; gap: 2px; max-height: 72vh; overflow-y: auto; position: sticky; top: 12px; }
.wh-tree__title { padding: 4px 8px 8px; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); }
.wh-tree__item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; background: transparent; border: 0; border-radius: 3px; cursor: pointer; font: inherit; font-size: .84rem; text-align: left; color: var(--text); }
.wh-tree__item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-tree__item small { color: var(--text-soft); font-weight: 700; }
.wh-tree__item:hover { background: var(--surface-hover); }
.wh-tree__item.is-active { background: var(--brand-fill-gradient); color: #fff; }
.wh-tree__item.is-active small { color: rgba(255, 255, 255, .8); }
.wh-tree__item .app-icon { width: 16px; height: 16px; }
.wh-tree__none { padding: 8px; font-size: .78rem; }

/* Subpestañas de configuración: mismo alto/padding de tab que el resto de
   la app vía --tab-height/--tab-padding-x (min-height, no height fija, para
   que quepa el icono + texto sin recortarse si el texto es algo más alto). */
.wh-subtabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.wh-subtab { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tab-height); padding: 0 var(--tab-padding-x); border: 1px solid var(--border); background: var(--surface-soft); color: var(--primary-dark); border-radius: var(--radius); font-weight: 700; font-size: var(--font-size-sm); cursor: pointer; }
.wh-subtab .app-icon { width: 16px; height: 16px; }
.wh-subtab.is-active { background: var(--brand-fill-gradient); color: #fff; border-color: transparent; }

/* Formularios */
.wh-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
.wh-form__section { grid-column: 1 / -1; margin: var(--space-4) 0 0; padding-bottom: var(--space-2); border-bottom: 2px solid var(--border); font-size: var(--font-size-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.wh-form__section:first-child { margin-top: 0; }
.wh-form__status { grid-column: 1 / -1; }
.wh-form__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
/* Campo (label + control): la etiqueta va SIEMPRE encima del control, nunca
   al lado, precisamente para que una etiqueta larga ("Punto de pedido
   mínimo", "Proveedor preferente"...) tenga todo el ancho de la columna para
   partirse en dos líneas sin empujar ni desalinear el input de al lado. */
.wh-field { display: grid; gap: var(--space-1); align-content: start; min-width: 0; }
.wh-field[hidden] { display: none; }
.wh-field--full { grid-column: 1 / -1; }
.wh-field > label, .wh-field > span { font-size: var(--font-size-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); line-height: 1.3; }
.wh-field--inline { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.wh-field--check { align-content: center; }
.wh-field__help { color: var(--text-soft); font-size: var(--font-size-xs); line-height: 1.35; }
.wh-req { color: #dc2626; font-style: normal; }
.wh-input-wrap { position: relative; display: flex; align-items: center; }
.wh-input-wrap .input { flex: 1; }
.wh-suffix { position: absolute; right: 10px; font-size: .74rem; color: var(--text-soft); pointer-events: none; }
.wh-input-wrap .input[type='number'] { padding-right: 38px; }
.wh-color { width: 60px; height: 38px; padding: 2px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); }
.wh-multi { display: flex; flex-wrap: wrap; gap: 6px; }
.wh-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); background: var(--surface-soft); border-radius: 3px; font-size: .8rem; cursor: pointer; text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 600; }
.wh-chip input { width: 15px; height: 15px; }
.wh-chip:has(input:checked) { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); border-color: var(--primary); }

/* Proveedores del artículo */
.wh-prov { display: grid; gap: var(--space-2); }
.wh-prov__head, .wh-prov-row { display: grid; grid-template-columns: 1.6fr 1.2fr .8fr .7fr .7fr auto 34px; gap: var(--space-2); align-items: center; }
.wh-prov__head span { font-size: var(--font-size-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.wh-prov-row .input { min-height: var(--control-height-sm); padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); }

/* Ventana de operación / pedido: mismo alto de pestaña que el resto (--tab-height) */
.wh-op__tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
.wh-op__tab { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tab-height); padding: 0 var(--tab-padding-x); border: 1px solid var(--border); background: var(--surface-soft); color: var(--primary-dark); border-radius: var(--radius); font-weight: 800; cursor: pointer; }
.wh-op__tab .app-icon { width: 16px; height: 16px; }
.wh-op__tab.is-active { background: var(--brand-fill-gradient); color: #fff; border-color: transparent; box-shadow: 0 6px 14px color-mix(in srgb, var(--primary) 30%, transparent); }
.wh-op__hint { margin: 0 0 12px; color: var(--text-soft); font-size: .84rem; }
.wh-op__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 14px; margin-bottom: 14px; }
.wh-op__head .wh-field--full { grid-column: 1 / -1; }
.wh-op__lines { margin-top: 12px; }
.wh-op__prod { display: grid; min-width: 150px; }
.wh-op__prod span { font-size: .78rem; color: var(--text-soft); }
.wh-op__rm { width: 40px; text-align: right; }
.wh-op__new { display: grid; gap: 6px; margin-top: 6px; }
.wh-table--lines .input { min-height: 34px; padding: 4px 8px; font-size: .84rem; }
.wh-order-form__add { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.wh-order-form__add .wh-search { flex: 1 1 320px; }
.wh-totals { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 22px; margin: 12px 0; padding: 10px 14px; background: var(--surface-soft); border-radius: 3px; }
.wh-totals > div { display: grid; text-align: right; }
.wh-totals span { font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); }
.wh-totals strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.wh-totals__total strong { font-size: 1.4rem; color: var(--primary-dark); }

/* Buscador con desplegable */
.wh-search { position: relative; margin-bottom: 4px; }
.wh-search__results { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--primary); border-radius: 3px; box-shadow: 0 14px 34px color-mix(in srgb, var(--primary) 25%, transparent); max-height: 320px; overflow-y: auto; }
.wh-search__results[hidden] { display: none; }
.wh-search__item { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 9px 12px; background: var(--surface); border: 0; border-bottom: 1px solid var(--surface-soft); text-align: left; cursor: pointer; font: inherit; font-size: .84rem; }
.wh-search__item:hover { background: var(--surface-hover); }
.wh-search__item small { color: var(--text-soft); }
.wh-search__none { padding: 12px; color: var(--text-soft); font-size: .84rem; }

/* Ficha */
.wh-detail__top { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.wh-detail__top h3 { margin: 2px 0 4px; font-size: 1.25rem; }
.wh-detail__sku { margin: 0; font-family: ui-monospace, Consolas, monospace; font-weight: 800; color: var(--primary); letter-spacing: .04em; }
.wh-detail__meta { margin: 0 0 6px; color: var(--text-soft); font-size: .84rem; }
.wh-detail h4 { margin: 18px 0 8px; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.wh-detail__actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.wh-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 16px; margin: 6px 0 12px; }
.wh-dl dt { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.wh-dl dd { margin: 0; font-weight: 600; }

@media (max-width: 900px) {
    .wh-split { grid-template-columns: 1fr; }
    .wh-tree { position: static; max-height: 220px; }
    .wh-form { grid-template-columns: 1fr; }
    .wh-prov__head { display: none; }
    .wh-prov-row { grid-template-columns: 1fr 1fr; }
    .wh-w-lg { width: 100% !important; }
    .wh-toolbar__filters .input, .wh-toolbar__filters select { flex: 1 1 140px; }
    .wh-panel { padding: 10px 10px 18px; }
    .wh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .wh-kpi { padding: 10px; gap: 8px; }
    .wh-kpi__icon { width: 34px; height: 34px; }
    .wh-kpi__body strong { font-size: 1.15rem; }
    .wh-search__item { grid-template-columns: 90px 1fr; }
    .wh-search__item small { display: none; }
    .wh-scan .input { width: 44vw; }
}

/* Ajustes tras revisar capturas */
.wh-tabs { gap: 4px; }
.wh-tab { padding: 8px 11px !important; font-size: .84rem !important; min-width: 0 !important; }
.wh-col-name { min-width: 230px; }
.wh-table td, .wh-table th { padding: 8px 10px; }
.wh-table td .wh-sub { max-width: 320px; }

.wh-cat-select { display: none; }

/* ===== Móvil ===== */
@media (max-width: 900px) {
    .wh-tree { display: none; }
    .wh-cat-select { display: block; }
    .wh-split { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    /* Pestañas: solo iconos en una fila; el nombre de la sección va debajo */
    .wh-tabs { flex-wrap: nowrap !important; gap: 3px !important; padding: 0 !important; }
    .wh-tab { flex: 1 1 0; padding: 10px 0 !important; justify-content: center; min-width: 0 !important; }
    .wh-tab span { display: none; }
    .wh-tab .app-icon { width: 19px; height: 19px; }
    .wh-tabtitle { display: block !important; }

    /* Tablas de listado → tarjetas apiladas */
    .wh-table:not(.wh-table--lines) thead { display: none; }
    .wh-table:not(.wh-table--lines), .wh-table:not(.wh-table--lines) tbody, .wh-table:not(.wh-table--lines) tr, .wh-table:not(.wh-table--lines) td { display: block; width: 100%; white-space: normal; }
    .wh-table:not(.wh-table--lines) tr { padding: 8px 12px; border-top: 1px solid var(--border); }
    .wh-table:not(.wh-table--lines) td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; border: 0; text-align: right !important; min-width: 0 !important; }
    .wh-table:not(.wh-table--lines) td::before { content: attr(data-label); flex: none; font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); text-align: left; }
    .wh-table:not(.wh-table--lines) td:empty { display: none; }
    .wh-table:not(.wh-table--lines) td[data-label=''] { justify-content: flex-end; }
    .wh-table:not(.wh-table--lines) td[data-label='']::before { display: none; }
    .wh-col-name { min-width: 0 !important; }
    .wh-table td .wh-sub { max-width: none; }
    .wh-table-wrap { border: 0; background: transparent; }
    .wh-table:not(.wh-table--lines) tbody tr { background: var(--surface); border: 1px solid var(--border); border-radius: 3px; margin-bottom: 8px; }
    .wh-toolbar__actions { width: 100%; }
    .wh-toolbar__actions .button { flex: 1 1 auto; justify-content: center; }
    .wh-pager { justify-content: space-between; }
    .wh-pager__info { width: 100%; }
    .wh-op__tab { flex: 1 1 45%; justify-content: center; }
    .wh-summarybar { gap: 10px; }
}

.wh-tabtitle { display: none; margin: 12px 0 0; font-size: 1rem; color: var(--primary-dark); }
.wh-cell { display: inline; }
@media (max-width: 720px) {
    .wh-table:not(.wh-table--lines) td .wh-cell { display: block; text-align: right; min-width: 0; }
}

/* --- Extras: fotos, kits, reservas, peticiones, importación ------------ */
.wh-thumb { width: 34px; height: 34px; object-fit: cover; border: 1px solid var(--border); border-radius: 3px; background: var(--surface-soft); flex: none; }
.wh-thumb--empty { display: inline-flex; align-items: center; justify-content: center; color: var(--text-soft); }
.wh-thumb--empty .app-icon { width: 16px; height: 16px; }
.wh-prodrow { display: flex; align-items: center; gap: 10px; }
.wh-detail__photo { display: block; width: 120px; height: 120px; object-fit: cover; border: 1px solid var(--border); border-radius: 3px; margin-top: 8px; }
.wh-photo { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.wh-photo__preview { width: 110px; height: 110px; border: 1px dashed var(--border-strong); border-radius: 3px; background: var(--surface-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; color: var(--text-soft); }
.wh-photo__preview img { width: 100%; height: 100%; object-fit: cover; }
.wh-photo__preview span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .75rem; }
.wh-photo__actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.wh-kit-row { display: grid; grid-template-columns: 1fr 110px 34px; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--border); }
.wh-kit-row .input { min-height: 34px; padding: 4px 8px; }
.wh-picked { margin: 6px 0 0; font-size: .85rem; }
.wh-req { display: grid; gap: 8px; margin-bottom: 10px; }
.wh-req__head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wh-req__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wh-approve { display: grid; gap: 6px; }
.wh-approve__row { display: grid; grid-template-columns: 1fr 110px; gap: 8px; align-items: center; }
.wh-import { display: grid; gap: 10px; }
.wh-mat-results { display: grid; gap: 6px; margin: 8px 0 14px; max-height: 320px; overflow: auto; }
.wh-mat-item, .wh-mat-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; text-align: left; padding: 6px 8px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); }
.wh-mat-item { cursor: pointer; }
.wh-mat-item span, .wh-mat-row span { display: grid; min-width: 0; }
.wh-mat-row { grid-template-columns: auto 1fr 90px 34px; margin-bottom: 6px; }

/* Almacén: icono del EPI/herramienta vinculado cuando el artículo no tiene foto */
.wh-detail__photo--icon { display: inline-flex; align-items: center; justify-content: center; font-size: 2.6rem; line-height: 1; border: 1px solid var(--border); border-radius: 3px; background: var(--surface-soft); }

/* Desplegables (select) de Almacén, EPIs, Herramientas y Formación: chevron más pequeño, más bajo y pegado al borde derecho */
.wh-layout select.input, .wh-form select.input, .wh-toolbar select {
    background-size: 4px 4px, 4px 4px;
    background-position: calc(100% - 12px) calc(50% + 1px), calc(100% - 8px) calc(50% + 1px);
    padding-right: 26px;
}

/* SKU bajo el nombre del artículo (ahorra una columna): más suave que el nombre y en monoespaciada */
.wh-sku { display: block; margin-top: 1px; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .7rem; font-weight: 500; letter-spacing: .02em; color: color-mix(in srgb, var(--text-soft) 80%, transparent); }

/* Unión persona ⇄ vehículo asignado (lista de almacenes) */
.wh-union { display: inline-flex; align-items: center; gap: 8px; }
.wh-union--parent { box-shadow: inset 3px 0 0 var(--primary); padding-left: 8px !important; }
.wh-union--child { margin-left: 18px; }
.wh-union__branch { position: relative; width: 24px; height: 34px; flex: none; }
.wh-union__branch::before { content: ''; position: absolute; left: 4px; top: -28px; width: 18px; height: 46px; border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary); border-bottom-left-radius: 3px; }
.wh-union__vehicle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border-radius: 3px; background: #d99a00; }
.wh-union__vehicle .app-icon { margin: 0; filter: brightness(0) invert(1); width: 20px; height: 20px; }
.wh-union__chips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: middle; }
.wh-union__chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); border-radius: 3px; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary-dark); font-size: .74rem; font-weight: 700; }
.wh-union__chip .app-icon { margin: 0; width: 14px; height: 14px; }

/* ======== Ventanas (modales) modernas y compactas ======== */
.wh-form { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 14px; }
.wh-form__section { margin: 8px 0 0; padding: 0 0 5px; border-bottom: 1px solid var(--border); font-size: .68rem; letter-spacing: .12em; display: flex; align-items: center; gap: 8px; }
.wh-form__section::before { content: ''; width: 4px; height: 12px; border-radius: 1px; background: var(--primary); }
.wh-form__panel { display: contents; }
.wh-form__panel[hidden] { display: none; }
.wh-field { gap: 4px; }
.wh-field > label, .wh-field > span { font-size: .68rem; letter-spacing: .05em; }
.wh-field__help { font-size: .7rem; opacity: .85; }
.wh-form .input, .wh-form select.input { min-height: 34px; padding: 6px 10px; font-size: .9rem; }
.wh-form textarea.input { min-height: 0; }
.wh-form .wh-color { height: 34px; }

/* Pestañas dentro de una ventana (secciones del formulario) */
.wh-tabs { grid-column: 1 / -1; display: flex; gap: 2px; margin: -2px 0 2px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.wh-tabs::-webkit-scrollbar { display: none; }
.wh-tabs__btn { flex: none; position: relative; padding: 8px 14px; border: 0; background: transparent; color: var(--text-soft); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: color .15s ease, background .15s ease; }
.wh-tabs__btn:hover { color: var(--primary-dark); background: color-mix(in srgb, var(--primary) 7%, transparent); }
.wh-tabs__btn.is-active { color: var(--primary-dark); }
.wh-tabs__btn.is-active::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); }
.wh-tabs__btn[hidden] { display: none; }
@media (max-width: 720px) { .wh-form { grid-template-columns: 1fr; } }

/* Formulario con columna lateral (foto a la izquierda) que aprovecha todo el ancho de la ventana */
.wh-form--aside { grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
.wh-form__main { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 14px; align-content: start; min-width: 0; }
.wh-form__aside { position: sticky; top: 0; display: grid; gap: 6px; }
.wh-form__aside > label { font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-soft); }
.wh-form__aside .wh-photo { flex-direction: column; align-items: stretch; gap: 8px; }
.wh-form__aside .wh-photo__preview { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.wh-form__aside .wh-photo__actions { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.wh-form__aside .wh-photo__actions .wh-field__help { flex-basis: 100%; }
@media (max-width: 760px) { .wh-form--aside { grid-template-columns: 1fr; } .wh-form__aside { position: static; } .wh-form__aside .wh-photo__preview { max-width: 200px; } }

/* Ficha de artículo: foto a la izquierda, datos en medio y estado a la derecha */
.wh-detail__top { justify-content: flex-start; align-items: stretch; gap: 18px; }
.wh-detail__top .wh-detail__photo { flex: none; width: 150px; height: 150px; margin-top: 0; }
.wh-detail__top .wh-detail__info { flex: 1 1 0; min-width: 0; align-self: center; }
.wh-detail__top .wh-detail__state { flex: none; margin-left: auto; align-self: flex-start; }
@media (max-width: 640px) { .wh-detail__top { flex-wrap: wrap; } .wh-detail__top .wh-detail__photo { width: 110px; height: 110px; } }

/* Listado de artículos: la categoría tiene su propio ancho (no se parte en varias líneas) y el nombre se ajusta para no forzar scroll horizontal */
.wh-col-cat { min-width: 190px; }
.wh-col-name { min-width: 220px; max-width: 380px; }
.wh-col-name .wh-prodname { overflow-wrap: anywhere; }
@media (max-width: 900px) { .wh-col-cat { min-width: 0; } .wh-col-name { max-width: none; } }

/* Panel de categorías: un poco más ancho y sin scroll horizontal (el texto largo se recorta con puntos suspensivos) */
.wh-split { grid-template-columns: 280px minmax(0, 1fr); }
.wh-tree { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; }
.wh-tree__item { min-width: 0; }
.wh-tree__item span { min-width: 0; }
.wh-tree__item .app-icon, .wh-tree__item .wh-glyph { flex: none; }
@media (max-width: 900px) { .wh-split { grid-template-columns: 1fr; } }

/* Entrega con firma (herramientas y EPIs): datos a la izquierda, firma y botón a la derecha, todo en una pantalla */
.sign-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.sign-layout__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.sign-layout__fields .wh-field--full { grid-column: 1 / -1; }
.sign-layout__fields textarea.input { min-height: 0; }
.sign-layout__fields .wh-field__help { display: none; }
.sign-layout__sign { display: grid; gap: 8px; align-content: start; position: sticky; top: 0; }
.sign-layout .labor-signature-pad { gap: 6px; }
.sign-layout .labor-signature-pad__worker:empty, .sign-layout .labor-signature-pad__worker:has(strong:empty) { display: none; }
.sign-layout .labor-signature-pad__canvas { height: 180px; border-radius: 3px; }
.sign-layout .labor-signature-pad__actions { justify-content: flex-end; }
.sign-layout .labor-signature-pad__actions .button { min-height: 28px; padding: 0 12px; font-size: .78rem; }
.sign-layout .labor-signature-pad__hint { margin: 0; font-size: .74rem; line-height: 1.35; }
.sign-layout__submit { width: 100%; min-height: 40px; }
@media (max-width: 820px) { .sign-layout { grid-template-columns: 1fr; } .sign-layout__sign { position: static; } .sign-layout__fields { grid-template-columns: 1fr; } }

/* Ficha de una entrega (el ojo): cabecera, datos en rejilla y firma al lado */
.loan-detail { display: grid; gap: 12px; }
.loan-detail__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.loan-detail__title { display: grid; gap: 2px; min-width: 0; }
.loan-detail__title h3 { margin: 0; font-size: 1.15rem; }
.loan-detail__body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.loan-detail__facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.loan-detail__facts > div { display: grid; gap: 1px; min-width: 0; padding: 6px 8px; border-left: 3px solid var(--primary); background: var(--surface-soft); border-radius: 0 3px 3px 0; }
.loan-detail__facts > div.is-full { grid-column: 1 / -1; }
.loan-detail__facts dt { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); }
.loan-detail__facts dd { margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
.loan-detail__sign { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); }
.loan-detail__label { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); }
.loan-detail__sign img { display: block; width: 100%; max-height: 150px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 3px; }
.loan-detail__reviews { display: grid; gap: 4px; }
.loan-detail__reviews h4 { margin: 0 0 2px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.loan-detail__review { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 4px 0; border-top: 1px solid var(--border); }
.loan-detail__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding-top: 4px; border-top: 1px solid var(--border); }
@media (max-width: 760px) { .loan-detail__body { grid-template-columns: 1fr; } .loan-detail__facts { grid-template-columns: 1fr; } }

/* Catálogos con muchas columnas: el texto y las etiquetas se parten en varias líneas en vez de ensanchar la tabla. */
.wh-table-wrap { max-width: 100%; }
.wh-table td .badge, .wh-table td .wh-badge { white-space: normal; }
.wh-table td { overflow-wrap: anywhere; }