/* FUENTE ÚNICA DE VERDAD — no redefinir tokens en dashboard.html. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #0a1019;
  --color-canvas-soft: #0e1622;
  --color-surface: #121b28;
  --color-surface-raised: #172232;
  --color-surface-hover: #1b293b;
  --color-border: #2b394b;
  --color-border-strong: #40516a;
  --color-text: #f5f7fb;
  --color-text-muted: #aab5c7;
  --color-text-subtle: #778398;
  --color-action: #fb7d2d;
  --color-action-hover: #ff914d;
  --color-action-ink: #201207;
  /* La selección usa la tinta de acción naranja: interacción neutral, no éxito, con AA sobre superficies oscuras. */
  --color-selection: var(--color-action);
  --color-success: #46d982;
  --color-success-soft: rgba(70, 217, 130, 0.13);
  --color-warning: #f2b84b;
  --color-warning-soft: rgba(242, 184, 75, 0.13);
  --color-danger: #f16a61;
  --color-danger-soft: rgba(241, 106, 97, 0.13);
  --color-danger-ink: #230a08;
  --color-info: #78a9ff;
  --color-info-soft: rgba(120, 169, 255, 0.13);
  --color-focus: #8bb8ff;
  --color-accent-purple: #c079ff;
  --color-accent-purple-soft: rgba(192, 121, 255, 0.13);
  --color-backdrop: rgba(0, 0, 0, .66);
  --chart-1: var(--color-action);
  --chart-2: var(--color-info);
  --chart-3: var(--color-success);
  --chart-4: var(--color-focus);
  --chart-5: var(--color-danger);
  --chart-waterfall-positive: var(--color-info);
  --chart-waterfall-negative: var(--color-danger);
  --chart-seq-base: var(--color-info);
  --chart-surface-line: var(--color-surface);
  --chart-text: var(--color-text-muted);
  --chart-grid: var(--color-border);
  --chart-muted: var(--color-text-subtle);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --radius-xs: 3px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-control: var(--radius-md);
  --radius-panel: var(--radius-lg);
  --radius-page: var(--radius-xl);
  --shadow: none;
  --shadow-sm: 0 12px 30px rgba(0, 0, 0, .28);
  --shadow-md: 0 18px 42px rgba(0, 0, 0, .28);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, .42);
  --shadow-accent: 0 0 0 1px color-mix(in srgb, var(--color-action) 35%, transparent), var(--shadow-sm);
  --shadow-status-success: 0 0 0 3px var(--color-success-soft);
  --shadow-status-warning: 0 0 0 3px var(--color-warning-soft);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-focus) 35%, transparent);
  --shadow-tab-active: inset 0 0 0 1px var(--color-selection);
  --control-height: 44px;
  --control-height-dense: 32px;
  --button-spinner-size: 14px;
  /* Escala única de elevación: base(0) < sticky(10) < header(40) <
     nav(45) < dropdown/popover(50) < backdrop(60) < modal(70) <
     toast(80) < tooltip(90). Nav usa un subnivel propio para no empatar
     con el header sin romper la jerarquía compartida header/nav. */
  --z-base: 0;
  --z-sticky: 10;
  --z-header: 40;
  --z-nav: 45;
  --z-dropdown: 50;
  --z-backdrop: 60;
  --z-modal: 70;
  --z-toast: 80;
  --z-tooltip: 90;
  --nav-rail-width: 212px;
  --nav-rail-collapsed-width: 64px;
  --sticky-offset: 128px;
  /* Tipografía web UI: escala fija, legible y sin dependencia de red. */
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-display: 28px;
  --font-size-title: 20px;
  --font-size-control: 16px;
  --font-size-body: 15px;
  --font-size-body-strong: 15px;
  --font-size-small: 14px;
  --font-size-caption: 12px;
  --font-size-caption-strong: 12px;
  /* Excepción T2.2: Chart.js usa 11px solo en ticks densos. */
  --font-size-chart-tick: 11px;
  --font-size-micro: 10px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
}

html { background: var(--color-canvas); }
body {
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
}

button, input, select, textarea, summary { font-family: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-focus) 70%, transparent);
  outline-offset: 2px;
}
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: .48; }
.table-sort-button {
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: calc(var(--space-2) * -1) 0;
  padding: var(--space-2) 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  cursor: pointer;
}
.table-sort-button::after { content: "↕"; color: var(--color-text-subtle); font-size: var(--font-size-caption); }
th[aria-sort="ascending"] .table-sort-button::after { content: "↑"; color: var(--color-info); }
th[aria-sort="descending"] .table-sort-button::after { content: "↓"; color: var(--color-info); }
.table-sort-button:hover { color: var(--color-text); }

/* Shell operativo compartido. Estas primitivas dan a ventas, inventario y
   administración la misma geometría de aplicación sin repetir colores ni
   bordes dentro de cada módulo. */
.ui-app-shell, .app-shell {
  min-height: 100dvh;
  padding-top: max(var(--space-3), env(safe-area-inset-top));
  padding-right: max(var(--space-3), env(safe-area-inset-right));
  padding-left: max(var(--space-3), env(safe-area-inset-left));
}
.ui-app-header, .app-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  margin: -1px -1px var(--space-3);
  padding: var(--space-3) var(--space-3) 10px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
}
.ui-app-header__row, .header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ui-app-mark, .brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-action);
  border-radius: var(--radius-control);
  background: var(--color-action);
  color: var(--color-action-ink);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
}
.ui-app-title, .title-wrap { min-width: 0; flex: 1; }
.app-header h1 { margin: 0; font-size: var(--font-size-body-strong); line-height: 1.1; letter-spacing: 0; }
.ui-app-subtitle, .header-sub { margin-top: 3px; color: var(--color-text-muted); font-size: var(--font-size-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn {
  width: var(--control-height-dense);
  min-height: var(--control-height-dense);
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: var(--shadow);
  transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out, transform 180ms ease-out;
}
.icon-btn:hover:not(:disabled) { background: var(--color-surface-hover); border-color: var(--color-border-strong); }
.icon-btn:active:not(:disabled) { transform: translateY(1px); }
.icon-btn.is-loading { position: relative; color: transparent; cursor: wait; pointer-events: none; }
.icon-btn.is-loading::after { content: ""; position: absolute; width: var(--button-spinner-size); height: var(--button-spinner-size); border: 2px solid var(--color-text); border-right-color: transparent; border-radius: 50%; animation: ui-button-spin 700ms linear infinite; }
.icon-btn[hidden] { display: none; }
.ui-status-line, .status-line { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); overflow-x: auto; scrollbar-width: none; }
.status-line::-webkit-scrollbar { display: none; }
.ui-status-pill, .status-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-canvas-soft);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); box-shadow: var(--shadow-status-success); }
.status-dot.warn { background: var(--color-warning); box-shadow: var(--shadow-status-warning); }
.workspace-load-banner {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-panel);
  background: var(--color-warning-soft);
  color: var(--color-text);
  font-size: var(--font-size-body);
}
.workspace-load-banner[hidden] { display: none; }
.workspace-load-banner-text { flex: 1 1 auto; min-width: 0; }
.workspace-load-banner-actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-2); }
@media (max-width: 640px) {
  .workspace-load-banner { flex-wrap: wrap; }
  .workspace-load-banner-text { flex: 1 1 100%; }
}
.ui-workspace, .workspace { width: 100%; max-width: 1380px; display: block; gap: var(--space-3); margin: 0 auto; }
.ui-layout, .layout { width: 100%; max-width: 1380px; display: grid; gap: var(--space-3); margin: 0 auto; }
/* Compatibilidad con el contrato estático legado: el drawer fue retirado;
   estos nombres no tienen reglas ni comportamiento runtime.
   .module-nav-tab; body.module-nav-open; touch-action: manipulation; */
.ui-module-nav, .module-nav { display: flex; }
.ui-module-nav-group, .module-nav-group { display: grid; }
.module-nav-collapse { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: transparent; color: var(--color-text-muted); }
.module-nav-group[hidden] { display: none; }
.module-nav-group-label { grid-column: 1 / -1; padding: 2px 6px; color: var(--color-text-subtle); font-size: var(--font-size-caption-strong); font-weight: var(--font-weight-semibold); letter-spacing: .06em; text-transform: uppercase; }
/* Contraste WCAG AA verificado: #201207 sobre #f16a61 = 6.06:1. */
.nav-badge { position: absolute; top: var(--space-1); right: 10px; min-width: 16px; height: 16px; display: grid; place-items: center; padding: 0 var(--space-1); border-radius: 999px; background: var(--color-danger); color: var(--color-action-ink); font-size: var(--font-size-micro); font-weight: var(--font-weight-semibold); line-height: 1; }
.nav-badge[hidden] { display: none; }
.inventory-quicklinks { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.inventory-quicklinks a.inventory-secondary-btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.ui-content-stack, .content-stack { display: grid; gap: var(--space-3); }
.module-page { display: none; }
.module-page.active { display: grid; gap: var(--space-3); }

@media (min-width: 760px) {
  .ui-app-shell, .app-shell { padding: var(--space-4); }
  .ui-app-header, .app-header { max-width: 1380px; margin: 0 auto var(--space-3); padding: var(--space-3) var(--space-4); }
  .app-header h1 { font-size: var(--font-size-title); }
  .ui-workspace, .workspace { display: grid; grid-template-columns: var(--nav-rail-width) minmax(0, 1fr); align-items: start; transition: grid-template-columns 180ms ease-out; }
  body.module-nav-collapsed .workspace { grid-template-columns: var(--nav-rail-collapsed-width) minmax(0, 1fr); }
  .module-nav-head { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 var(--space-1) 0 var(--space-2); }
  .module-nav-title { color: var(--color-text); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); letter-spacing: 0; }
  .module-nav-collapse { width: var(--control-height); height: var(--control-height); display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: transparent; color: var(--color-text-muted); }
  .module-nav-collapse:hover:not(:disabled) { color: var(--color-text); background: var(--color-surface-hover); }
  .module-nav-collapse svg { width: 18px; height: 18px; }
  .ui-module-nav, .module-nav { position: sticky; top: var(--sticky-offset, 128px); z-index: var(--z-nav); width: auto; max-height: calc(100dvh - var(--sticky-offset, 128px) - 24px); display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); box-shadow: var(--shadow); overflow-x: hidden; overflow-y: auto; transform: none; }
  .ui-module-nav-group, .module-nav-group { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: var(--space-1); }
  .module-nav-group-label { padding: 10px 12px 2px; }
  .ui-module-link, .module-link { position: relative; display: grid; place-items: center; border-radius: var(--radius-control); color: var(--color-text-muted); font-weight: var(--font-weight-semibold); letter-spacing: 0; text-decoration: none; transition: background-color 160ms ease-out, color 160ms ease-out; }
  .ui-module-link, .module-link { min-height: var(--control-height); grid-template-columns: 28px minmax(0, 1fr); justify-content: start; place-items: center start; gap: 2px; padding: 0 var(--space-3); font-size: var(--font-size-caption); text-align: left; }
  .module-link:hover:not(:disabled) { color: var(--color-text); background: var(--color-surface-hover); }
  .module-link .nav-icon { display: inline-flex; line-height: 1; }
  .module-link .nav-icon svg { width: 18px; height: 18px; display: block; }
  .module-link.active { background: color-mix(in srgb, var(--color-selection) 13%, transparent); color: var(--color-selection); box-shadow: var(--shadow); }
  .module-link.active .nav-icon { color: var(--color-selection); }
  .module-nav.is-collapsed { padding-inline: 7px; }
  .module-nav.is-collapsed .module-nav-head { justify-content: center; padding-inline: 0; }
  .module-nav.is-collapsed .module-nav-title, .module-nav.is-collapsed .module-nav-group-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .module-nav.is-collapsed .module-nav-collapse svg { transform: rotate(180deg); }
  .module-nav.is-collapsed .module-link { grid-template-columns: 1fr; justify-content: center; place-items: center; padding: 0; }
  .module-nav.is-collapsed .module-link > span:not(.nav-icon):not(.nav-badge) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (max-width: 759px) {
  .ui-app-header, .app-header { padding: 10px 12px 8px; }
  .workspace, .layout { display: block; }
}

.ui-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.ui-page-title { margin: 0; font-size: var(--font-size-display); line-height: 1.08; letter-spacing: 0; font-weight: var(--font-weight-semibold); text-wrap: balance; }
.ui-section-title { margin: 0; font-size: var(--font-size-title); line-height: 1.2; letter-spacing: 0; font-weight: var(--font-weight-semibold); text-wrap: balance; }
.ui-meta { color: var(--color-text-muted); font-size: var(--font-size-small); line-height: 1.4; }
.ui-label { color: var(--color-text-muted); font-size: var(--font-size-caption-strong); font-weight: var(--font-weight-semibold); line-height: 1.25; }
.ui-number { font-variant-numeric: tabular-nums; }

.ui-card, .ui-panel, .panel, .inventory-card, .filter-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.metric-card {
  min-height: 112px;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
}
.ui-panel { padding: var(--space-4); }
.ui-panel[data-state="success"] { border-color: var(--color-success); }
.ui-panel[data-state="error"] { border-color: var(--color-danger); }

/* Primitivos reutilizables. Las clases existentes se mapean abajo para que
   cada módulo adopte esta base sin reescribir su estructura ni su lógica. */
.ui-card { padding: var(--space-4); }
.ui-kpi {
  min-height: 112px;
  padding: var(--space-4);
  display: grid;
  align-content: start;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
}
.ui-kpi__label { color: var(--color-text-muted); font-size: var(--font-size-caption-strong); font-weight: var(--font-weight-semibold); letter-spacing: .04em; text-transform: uppercase; }
.ui-kpi__value { color: var(--color-text); font-size: var(--font-size-title); line-height: 1; font-weight: var(--font-weight-semibold); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.ui-data-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); overflow: hidden; }
.ui-data-table th, .ui-data-table td { padding: var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; }
.ui-data-table th { color: var(--color-text-muted); font-size: var(--font-size-caption-strong); font-weight: var(--font-weight-semibold); }
.ui-empty-state { min-height: 132px; display: grid; place-items: center; padding: var(--space-5); text-align: center; color: var(--color-text-muted); border: 1px dashed var(--color-border); border-radius: var(--radius-panel); }
.ui-form-layout { display: grid; gap: var(--space-4); }

.ui-button, .inventory-primary-btn, .primary-btn, .inventory-secondary-btn, .ghost-btn {
  min-height: var(--control-height);
  box-sizing: border-box;
  position: relative;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-border-strong);
  padding: 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--font-size-control);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out, transform 180ms ease-out;
}
.ui-button:active:not(:disabled), .inventory-primary-btn:active:not(:disabled), .primary-btn:active:not(:disabled), .inventory-secondary-btn:active:not(:disabled), .ghost-btn:active:not(:disabled) { transform: translateY(1px); }
.ui-button:disabled, .inventory-primary-btn:disabled, .primary-btn:disabled, .inventory-secondary-btn:disabled, .ghost-btn:disabled { cursor: not-allowed; opacity: .48; transform: none; }
.ui-button:focus-visible, .inventory-primary-btn:focus-visible, .primary-btn:focus-visible, .inventory-secondary-btn:focus-visible, .ghost-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-focus) 70%, transparent); outline-offset: 2px; }
.ui-button--primary, .inventory-primary-btn, .primary-btn {
  background: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-action-ink);
}
.ui-button--primary:hover:not(:disabled), .inventory-primary-btn:hover:not(:disabled), .primary-btn:hover:not(:disabled) { background: var(--color-action-hover); border-color: var(--color-action-hover); }
.ui-button--secondary, .inventory-secondary-btn, .ghost-btn { background: transparent; color: var(--color-text); }
.ui-button--secondary:hover:not(:disabled), .inventory-secondary-btn:hover:not(:disabled), .ghost-btn:hover:not(:disabled) { background: var(--color-surface-hover); border-color: var(--color-border-strong); }

/* Dialog único para confirmaciones que cambian datos o publican documentos. */
.app-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  background: var(--color-backdrop);
}
.app-dialog-backdrop[hidden], .app-dialog[hidden] { display: none; }
.app-dialog {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-4);
}
.app-dialog__surface {
  width: min(360px, calc(100vw - 32px));
  max-height: min(640px, calc(100dvh - 32px));
  overflow: auto;
  padding: var(--space-6);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-lg);
}
.app-dialog__surface h2 { margin: 0; font-size: var(--font-size-title); }
.app-dialog__surface > p { margin: var(--space-3) 0 0; color: var(--color-text-muted); line-height: 1.45; }
.app-dialog__form-field { margin-top: var(--space-4); }
.app-dialog__form-field label { display: grid; gap: var(--space-2); font-weight: var(--font-weight-semibold); }
.app-dialog__form-field textarea { width: 100%; min-height: 104px; box-sizing: border-box; resize: vertical; }
.app-dialog__error { color: var(--color-danger); font-size: var(--font-size-small); }
.app-dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }
.app-dialog__confirm--danger { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-danger-ink); }
.app-dialog__confirm--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--color-danger) 82%, white); border-color: color-mix(in srgb, var(--color-danger) 82%, white); }
body.app-dialog-open { overflow: hidden; }
/* Ficha 360 del insumo: panel lateral modal, aislado del dialogo destructivo. */
.inventory-item-drawer-backdrop { position: fixed; inset: 0; z-index: var(--z-backdrop); background: var(--color-backdrop); }
.inventory-item-drawer-backdrop[hidden], .inventory-item-drawer[hidden] { display: none; }
.inventory-item-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: var(--z-modal);
  width: min(460px, calc(100vw - 20px));
  max-width: 100%;
  overflow-y: auto;
  padding: var(--space-6);
  background: var(--color-surface);
  border-left: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-lg);
}
.inventory-item-drawer__header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); padding-right: var(--space-1); }
.inventory-item-drawer__header h2 { margin: 2px 0 var(--space-1); font-size: var(--font-size-title); line-height: 1.2; }
.inventory-item-drawer__header .ui-meta { margin: 0; line-height: 1.45; }
.inventory-item-drawer__close { width: var(--control-height); height: var(--control-height); border: 1px solid var(--color-border); border-radius: 999px; background: transparent; color: var(--color-text-muted); font-size: var(--font-size-control); }
.inventory-item-drawer__close:hover { background: var(--color-surface-hover); color: var(--color-text); }
.inventory-item-drawer__close:focus-visible, .inventory-catalog-item-name:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-focus) 70%, transparent); outline-offset: 2px; }
.inventory-item-drawer__status { grid-column: 1 / -1; justify-self: start; padding: 4px 9px; border-radius: 999px; background: var(--color-success-soft); color: var(--color-success); font-size: var(--font-size-caption-strong); font-weight: var(--font-weight-semibold); }
.inventory-item-drawer__body { display: grid; }
.inventory-item-drawer__section { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.inventory-item-drawer__section h3 { margin: 0 0 var(--space-3); color: var(--color-text-subtle); font-size: var(--font-size-caption-strong); letter-spacing: .08em; text-transform: uppercase; }
.inventory-item-drawer__stock-list, .inventory-item-drawer__history-list { display: grid; gap: var(--space-2); }
.inventory-item-drawer__stock-row, .inventory-item-drawer__history-row { display: grid; align-items: center; gap: var(--space-2); min-height: 52px; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-raised); }
.inventory-item-drawer__stock-row { grid-template-columns: minmax(0, 1fr) auto; }
.inventory-item-drawer__stock-row strong, .inventory-item-drawer__history-row strong { font-size: var(--font-size-small); }
.inventory-item-drawer__stock-row span, .inventory-item-drawer__history-row span { color: var(--color-text-muted); font-size: var(--font-size-caption); }
.inventory-item-drawer__history-row { grid-template-columns: minmax(0, 1fr) auto; }
.inventory-item-drawer__history-row div { display: grid; gap: 3px; }
.inventory-item-drawer__quantity { color: var(--color-text) !important; font-variant-numeric: tabular-nums; font-weight: var(--font-weight-semibold); white-space: nowrap; }
.inventory-item-drawer__quantity.is-negative { color: var(--color-danger) !important; }
.inventory-item-drawer__quantity.is-positive { color: var(--color-success) !important; }
.inventory-item-drawer__supply { display: grid; gap: var(--space-2); margin: 0; color: var(--color-text-muted); font-size: var(--font-size-small); }
.inventory-item-drawer__supply strong { color: var(--color-text); }
.inventory-item-drawer__presentations { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.inventory-item-drawer__presentations li { padding: 5px 8px; border-radius: 999px; background: var(--color-canvas-soft); color: var(--color-text-muted); font-size: var(--font-size-caption); }
.inventory-item-drawer__footer { position: sticky; bottom: calc(var(--space-6) * -1); display: flex; justify-content: flex-end; margin: var(--space-6) calc(var(--space-6) * -1) calc(var(--space-6) * -1); padding: var(--space-4) var(--space-6) max(var(--space-4), env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-surface) 96%, transparent); }
.inventory-catalog-item-name { display: block; max-width: 100%; padding: 0; border: 0; background: transparent; color: var(--color-text); font: inherit; font-weight: var(--font-weight-semibold); text-align: left; }
.inventory-catalog-item-name:hover { color: var(--color-action-hover); text-decoration: underline; text-underline-offset: 3px; }
body.inventory-item-drawer-open { overflow: hidden; }

.date-range-error { margin: var(--space-2) 0 0; color: var(--color-danger); font-size: var(--font-size-small); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--color-danger); }

/* Loading conserva el texto en el flujo, pero lo vuelve transparente; el
   spinner absoluto no cambia el ancho y evita saltos de layout. */
.ui-button.is-loading, .ui-button--primary.is-loading, .inventory-primary-btn.is-loading, .primary-btn.is-loading, .ui-button--secondary.is-loading, .inventory-secondary-btn.is-loading, .ghost-btn.is-loading {
  color: transparent;
  cursor: wait;
  pointer-events: none;
}
.ui-button.is-loading::after, .ui-button--primary.is-loading::after, .inventory-primary-btn.is-loading::after, .primary-btn.is-loading::after, .ui-button--secondary.is-loading::after, .inventory-secondary-btn.is-loading::after, .ghost-btn.is-loading::after {
  content: "";
  position: absolute;
  width: var(--button-spinner-size);
  height: var(--button-spinner-size);
  border: 2px solid var(--color-text);
  border-right-color: transparent;
  border-radius: 50%;
  animation: ui-button-spin 700ms linear infinite;
}
.ui-button--primary.is-loading::after, .inventory-primary-btn.is-loading::after, .primary-btn.is-loading::after { border-color: var(--color-action-ink); border-right-color: transparent; }
@keyframes ui-button-spin { to { transform: rotate(360deg); } }

.ui-form-layout, .inventory-operation-form, .inventory-auth-form, .inventory-toolbar { display: grid; gap: var(--space-4); }
.ui-field, .inventory-operation-form label, .inventory-auth-form label, .inventory-toolbar label { display: grid; gap: 6px; }
.ui-field > input, .ui-field > select, .ui-field > textarea,
.inventory-operation-form input:not([type="checkbox"]), .inventory-operation-form select, .inventory-operation-form textarea,
.search-input, .select-wrap, .date-grid input {
  width: 100%; min-height: var(--control-height); padding: 0 var(--space-3);
  background: var(--color-canvas-soft); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-control);
}
.ui-field > textarea, .inventory-operation-form textarea { min-height: 88px; padding-top: 11px; }
.ui-field > input:focus, .ui-field > select:focus, .ui-field > textarea:focus,
.inventory-operation-form input:focus, .inventory-operation-form select:focus, .inventory-operation-form textarea:focus { border-color: var(--color-focus); }
.ui-field--error > input, .ui-field--error > select, .ui-field--error > textarea { border-color: var(--color-danger); }
.inventory-field-error { margin: 6px 0 0; color: var(--color-danger); font-size: var(--font-size-small); line-height: 1.35; }
.inventory-empty--error { display: grid; gap: var(--space-3); color: var(--color-danger); }

.ui-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-canvas-soft); }
.ui-tab { min-height: var(--control-height); border: 0; border-right: 1px solid var(--color-border); background: transparent; color: var(--color-text-muted); font-weight: var(--font-weight-semibold); }
.ui-tab:hover:not(:disabled) { background: var(--color-surface-hover); color: var(--color-text); }
.ui-tab:active:not(:disabled) { transform: translateY(1px); }
.ui-tab:last-child { border-right: 0; }
.ui-tab[aria-selected="true"], .ui-tab.is-active { background: color-mix(in srgb, var(--color-selection) 13%, transparent); color: var(--color-text); box-shadow: var(--shadow-tab-active); }

.ui-search { display: flex; align-items: center; gap: var(--space-2); min-height: 56px; padding: 0 var(--space-3); background: var(--color-canvas-soft); border: 1px solid var(--color-border); border-radius: var(--radius-panel); transition: border-color 160ms ease, box-shadow 160ms ease; }
.ui-search:focus-within { border-color: var(--color-focus); box-shadow: var(--shadow-focus); }
.ui-search input { min-width: 0; flex: 1; border: 0; background: transparent; color: var(--color-text); font-size: var(--font-size-control); }
.ui-search input:focus:not(:focus-visible) { outline: 0; }
.ui-search input::placeholder { color: var(--color-text-muted); opacity: 1; }

.ui-state { padding: var(--space-5); text-align: center; color: var(--color-text-muted); border: 1px dashed var(--color-border); border-radius: var(--radius-panel); }
.ui-state--error { border-color: var(--color-danger); color: var(--color-danger); }
.ui-state--success { border-color: var(--color-success); color: var(--color-success); }

.ui-accordion { border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); overflow: clip; }
.ui-accordion__summary { min-height: 52px; padding: 0 var(--space-3); display: flex; align-items: center; gap: var(--space-2); cursor: pointer; list-style: none; }
.ui-accordion__summary::-webkit-details-marker { display: none; }
.ui-progress { margin-left: auto; padding: 4px 9px; border-radius: 999px; background: var(--color-success-soft); color: var(--color-success); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }

.ui-product-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(136px, .72fr); gap: var(--space-3); align-items: center; padding: var(--space-4); border-top: 1px solid var(--color-border); }
.ui-product-row:first-child { border-top: 0; }
.ui-product-row__name { margin: 0; font-size: var(--font-size-body-strong); letter-spacing: 0; font-weight: var(--font-weight-semibold); }
.ui-product-row__stock { margin-top: 5px; color: var(--color-text-muted); font-size: var(--font-size-small); }
.ui-product-row__stock strong { color: var(--color-danger); font-variant-numeric: tabular-nums; }
.ui-line-captured { display: inline-flex; align-items: center; gap: 5px; width: max-content; margin-top: var(--space-2); padding: 4px 9px; border-radius: 999px; background: var(--color-success-soft); color: var(--color-success); font-weight: var(--font-weight-semibold); }
.ui-stepper { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; min-height: var(--control-height); border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); overflow: hidden; }
.ui-stepper button { border: 0; background: transparent; color: var(--color-text-muted); font-size: var(--font-size-title); line-height: 1; }
.ui-stepper button:hover:not(:disabled) { background: var(--color-surface-hover); color: var(--color-text); }
.ui-stepper input { min-width: 0; border: 0; border-inline: 1px solid var(--color-border); background: transparent; color: var(--color-text); text-align: center; font-size: var(--font-size-title); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.ui-stepper--captured { border-color: var(--color-success); }

.ui-sticky-action { position: sticky; z-index: var(--z-sticky); bottom: max(var(--space-2), env(safe-area-inset-bottom)); margin-top: var(--space-4); padding: var(--space-3); display: flex; align-items: center; gap: var(--space-3); background: color-mix(in srgb, var(--color-surface) 94%, transparent); border: 1px solid var(--color-border); border-radius: var(--radius-panel); backdrop-filter: blur(12px); }
.ui-sticky-action__summary { min-width: 0; flex: 1; }
.ui-sticky-action__summary strong, .ui-sticky-action__summary span { display: block; }
.ui-sticky-action__summary span { color: var(--color-text-muted); margin-top: 3px; font-size: var(--font-size-small); }

/* Operaciones de inventario: una tarea a la vez. El hub desaparece al abrir
   una operación; la pantalla sigue la jerarquía compacta de captura. */
[hidden] { display: none !important; }
.inventory-operation-hub { max-width: 920px; padding: 0; background: transparent; border: 0; overflow: visible; }
.inventory-operation-heading { padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); }
#inventory-operation-grid { margin-top: var(--space-3); }
.inventory-operation-action-grid { gap: var(--space-3); }
/* Excepción documentada: estas acciones son tarjetas de entrada al flujo,
   no controles compactos; su altura comunica la tarea y mantiene el target. */
.inventory-operation-action {
  min-height: 96px; padding: var(--space-4); border: 1px solid var(--color-border); border-top: 3px solid var(--color-action);
  border-radius: var(--radius-panel); background: var(--color-surface); box-shadow: var(--shadow);
}
.inventory-operation-action:nth-child(2) { border-top-color: var(--color-success); }
.inventory-operation-action:nth-child(3) { border-top-color: var(--color-info); }
.inventory-operation-action:nth-child(4) { border-top-color: var(--color-danger); }
.inventory-operation-action:hover:not(:disabled), .inventory-operation-action:focus-visible { background: var(--color-surface-hover); border-color: var(--color-border-strong); }
.inventory-operation-action:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-focus) 70%, transparent); outline-offset: 2px; }
.inventory-operation-action:active:not(:disabled) { transform: translateY(1px); }
.inventory-operation-action span { color: var(--color-text-muted); font-size: var(--font-size-small); line-height: 1.35; }
.inventory-operation-form { margin-top: 0; gap: var(--space-5); }
.inventory-operation-flow-head { align-items: flex-start; justify-content: flex-start; gap: var(--space-4); padding: var(--space-2) var(--space-1) 0; }
.inventory-operation-back { width: var(--control-height); min-width: var(--control-height); min-height: var(--control-height); border: 0; background: transparent; color: var(--color-text); font-size: var(--font-size-title); line-height: 1; padding: 0; }
.inventory-operation-back:hover:not(:disabled) { color: var(--color-selection); }
.inventory-operation-flow-head .ui-page-title { font-size: var(--font-size-title); }
@media (min-width: 760px) {
  .inventory-operation-flow-head .ui-page-title { font-size: var(--font-size-display); }
}
.inventory-operation-form > .ui-tabs { margin-top: 0; border-radius: var(--radius-panel); }
#inventory-operation-editor { display: grid; gap: var(--space-5); }
.inventory-operation-grid { gap: var(--space-3); }
.inventory-operation-grid .ui-field { padding: 0; }
#inventory-operation-supplier-field, #inventory-operation-waste-type-label { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); padding: var(--space-3); }
.inventory-operation-filter-row { display: flex; gap: var(--space-2); overflow-x: auto; }

/* Anatomia compartida para documentos de captura: encabezado, lista y accion. */
.doc-header { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: end; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); }
.doc-header > .inventory-operation-grid { display: contents; }
.doc-header .ui-field { min-width: 0; margin: 0; }
#inventory-operation-note-field { grid-column: 1 / -1; }
.capture-evidence { min-height: var(--control-height); display: flex; align-items: center; gap: var(--space-2); }
.capture-evidence .inventory-secondary-btn { min-height: var(--control-height); display: inline-flex; align-items: center; margin: 0; cursor: pointer; }
.capture-evidence span { overflow: hidden; color: var(--color-text-muted); font-size: var(--font-size-small); text-overflow: ellipsis; white-space: nowrap; }
.capture-toolbar { display: grid; gap: var(--space-3); }
.capture-progress { display: grid; gap: var(--space-2); }
.capture-progress__label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: var(--font-size-small); }
.capture-progress__label span { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.capture-progress progress { width: 100%; height: 8px; accent-color: var(--color-action); }
.capture-search { margin: 0; }
.capture-search input { width: 100%; }
.category-chips { display: flex; gap: var(--space-2); overflow-x: auto; padding-block: 1px; }
/* Base compartida de chip de filtro compacto (tier "dense", 32px). Las tres
   variantes (categoria, alerta de stock, categoria de receta) comparten
   tamano, transicion y estado de foco; solo cambia tono/contenido. */
.category-chip, .stock-alert-chip, .inventory-recipe-category-chip {
  min-height: var(--control-height-dense);
  transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}
.category-chip:focus-visible, .stock-alert-chip:focus-visible, .inventory-recipe-category-chip:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-focus) 70%, transparent); outline-offset: 2px;
}
.category-chip { flex: 0 0 auto; padding-inline: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: 999px; background: var(--color-surface); color: var(--color-text-muted); font-weight: var(--font-weight-semibold); }
.category-chip[aria-pressed="true"] { border-color: var(--color-selection); background: color-mix(in srgb, var(--color-selection) 13%, transparent); color: var(--color-text); }
.capture-list { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); }
.capture-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(120px, .55fr) minmax(110px, .42fr); gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); transition: background-color 140ms ease-out, box-shadow 140ms ease-out; }
.capture-row:last-child { border-bottom: 0; }
/* TASK-005: seccion colapsable de insumos opcionales dentro de la lista de conteo. */
.inventory-daily-optional > summary { min-height: 44px; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); font-size: var(--font-size-small); font-weight: 500; color: var(--color-text-muted); cursor: pointer; }
.inventory-daily-optional__items { border-top: 1px solid var(--color-border); }
.capture-row.is-touched { background: color-mix(in srgb, var(--color-selection) 10%, var(--color-surface)); box-shadow: inset 3px 0 0 var(--color-selection); }
.capture-row__identity h4 { margin: 0; font-size: var(--font-size-body-strong); }
.capture-row__identity p, .capture-row__stock { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--font-size-small); }
.capture-row__stock { margin: 0; text-align: right; }
.capture-row__quantity { display: grid; grid-template-columns: minmax(72px, 1fr) auto; gap: var(--space-2); align-items: center; margin: 0; }
.capture-row__quantity input { min-width: 0; text-align: right; }
.capture-row__quantity span { color: var(--color-text-muted); font-size: var(--font-size-small); }
.capture-presentation { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: var(--space-3); align-items: end; margin-left: calc(180px + var(--space-3)); }
.capture-presentation[hidden] { display: none; }
.capture-conversion { align-self: center; color: var(--color-selection); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.sticky-footer { position: sticky; bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-page); background: var(--color-surface-raised); box-shadow: var(--shadow-md); z-index: var(--z-sticky); }

/* El área de Entradas/Conteo/Mermas era un <select> nativo solo, aislado en
   una pantalla casi vacía: se sentía como un paso perdido, no como parte del
   flujo. El <select> sigue siendo la fuente de verdad (todo el resto del
   código lee/escucha .value y .selectedOptions), pero queda oculto: la
   elección real ocurre en un grid de tarjetas táctiles, mismo lenguaje
   visual que .access-area-card. */
.ui-area-picker-select { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ui-area-picker-label { color: var(--color-text-muted); font-size: 13px; font-weight: 750; }
.ui-area-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.ui-area-picker-card { min-height: 64px; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-surface-raised); color: var(--color-text-muted); font-size: 15px; font-weight: 750; text-align: left; cursor: pointer; transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out; }
.ui-area-picker-card::before { content: '□'; color: var(--color-text-muted); font-size: 22px; line-height: 1; }
.ui-area-picker-card[aria-checked="true"] { border-color: var(--color-success); background: var(--color-success-soft); color: var(--color-text); }
.ui-area-picker-card[aria-checked="true"]::before { content: '▣'; color: var(--color-success); }
.ui-area-picker-card:focus-visible { outline: 2px solid var(--color-success); outline-offset: 2px; }
.ui-area-picker:empty::after { content: 'No tenés áreas autorizadas para esta operación.'; grid-column: 1 / -1; color: var(--color-text-muted); font-size: 14px; }
.inventory-operation-filter-row .inventory-secondary-btn { min-height: var(--control-height-dense); padding-inline: var(--space-3); color: var(--color-text-muted); white-space: nowrap; }
.inventory-operation-filter-row .inventory-secondary-btn.is-active { border-color: var(--color-selection); background: color-mix(in srgb, var(--color-selection) 13%, transparent); color: var(--color-text); }
.inventory-operation-form .inventory-list { margin-top: 0; gap: var(--space-3); }
.inventory-operation-form .ui-accordion { border-radius: var(--radius-panel); background: var(--color-surface); }
.inventory-operation-form .ui-accordion__summary { min-height: 72px; padding: 0 var(--space-4); }
.ui-category-mark { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid currentColor; border-radius: 50%; font-weight: var(--font-weight-semibold); }
.ui-accordion--green .ui-category-mark { color: var(--color-success); background: var(--color-success-soft); }
.ui-accordion--amber .ui-category-mark { color: var(--color-warning); background: var(--color-warning-soft); }
.ui-accordion--purple .ui-category-mark { color: var(--color-accent-purple); background: var(--color-accent-purple-soft); }
.ui-accordion--blue .ui-category-mark { color: var(--color-info); background: var(--color-info-soft); }
.ui-accordion__chevron { color: var(--color-text-muted); font-size: var(--font-size-title); transition: transform 160ms ease-out; }
details[open] > .ui-accordion__summary .ui-accordion__chevron { transform: rotate(180deg); }
.ui-accordion__content { display: grid; gap: var(--space-2); padding: 0 var(--space-2) var(--space-2); }
.inventory-operation-form .ui-product-row { grid-template-columns: minmax(0, 1fr) minmax(184px, .7fr); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-canvas-soft); }
.inventory-operation-form .ui-product-row + .ui-product-row { border-top: 1px solid var(--color-border); }
.inventory-operation-form .ui-product-row > :last-child { display: grid; gap: var(--space-2); }
.inventory-operation-form .ui-stepper { border-radius: var(--radius-lg); min-height: var(--control-height); }
.inventory-operation-form .ui-stepper input { font-size: var(--font-size-title); }
.inventory-operation-form .ui-sticky-action { margin-top: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-page); background: var(--color-surface-raised); }
.inventory-operation-form .ui-sticky-action .inventory-primary-btn { min-width: min(100%, 250px); min-height: var(--control-height); }
#inventory-operation-review-screen { padding: var(--space-4); border-radius: var(--radius-page); }
.ui-review-metadata-frame, .inventory-review-metadata { display: grid; gap: 0; margin: 0; padding: var(--space-3) 0; border-block: 1px solid var(--color-border); }
.ui-review-metadata-frame div, .inventory-review-metadata div { position: relative; display: flex; justify-content: space-between; gap: var(--space-3); }
.inventory-review-meta-icon { position: absolute; left: var(--space-4); width: var(--control-height-dense); color: var(--color-success); font-size: var(--font-size-title); line-height: 1; text-align: center; }
.inventory-review-metadata dt { color: var(--color-text-muted); }
.inventory-review-metadata dd { margin: 0; font-weight: var(--font-weight-semibold); text-align: right; }
.inventory-review-summary { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) 0; color: var(--color-text-muted); }

/* La operación comparte el layout del inventario; sus ajustes viven en el formulario. */
.inventory-operation-form .inventory-operation-flow-head { gap: var(--space-2); padding: var(--space-2) 0 0; }
.inventory-operation-form #inventory-operation-context { margin: 0; line-height: 1.35; }
.inventory-operation-form > .ui-tabs { min-height: 92px; }
.inventory-operation-form .ui-tab { min-height: var(--control-height); font-size: var(--font-size-body); }
.inventory-operation-form #inventory-operation-editor { gap: var(--space-4); }
.inventory-operation-form .inventory-operation-grid { grid-template-columns: minmax(0, 1fr); }
.inventory-operation-form #inventory-operation-supplier-field { max-width: none; }
.inventory-operation-form .ui-search { min-height: 82px; padding-inline: var(--space-5); font-size: var(--font-size-control); }
.inventory-operation-form .ui-search span { font-size: var(--font-size-title); line-height: 1; }
.inventory-operation-form .ui-search input { font-size: var(--font-size-control); }
.inventory-operation-form .inventory-operation-filter-row { padding: 0 var(--space-2); }
.inventory-operation-form .inventory-operation-filter-row .inventory-secondary-btn { min-height: var(--control-height); padding-inline: var(--space-5); font-size: var(--font-size-control); }
.inventory-operation-form .ui-accordion__summary { min-height: 92px; padding-inline: var(--space-5); }
.inventory-operation-form .ui-category-mark { width: 58px; height: 58px; font-size: var(--font-size-title); }
.inventory-operation-form .ui-accordion__summary > strong { font-size: var(--font-size-title); }
.inventory-operation-form .ui-progress { padding: 7px 13px; font-size: var(--font-size-control); }
.inventory-operation-form .ui-product-row { min-height: 168px; grid-template-columns: minmax(0, 1fr) minmax(280px, .62fr); padding: var(--space-5); }
.inventory-operation-form .ui-product-row__name { font-size: var(--font-size-body-strong); }
.inventory-operation-form .ui-meta, .inventory-operation-form .ui-product-row__stock { font-size: var(--font-size-body); }
.inventory-operation-form .ui-stepper { min-height: var(--control-height); grid-template-columns: var(--control-height-dense) minmax(0, 1fr) var(--control-height-dense); }
.inventory-operation-form .ui-stepper button, .inventory-operation-form .ui-stepper input { font-size: var(--font-size-title); }
.inventory-operation-form .ui-sticky-action { position: fixed; z-index: var(--z-sticky); left: 50%; bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); width: min(calc(100vw - 32px), 900px); transform: translateX(-50%); min-height: 100px; padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-md); }
.inventory-operation-form .ui-sticky-action .inventory-primary-btn { min-width: 390px; min-height: var(--control-height); font-size: var(--font-size-control); }
.inventory-operation-form #inventory-operation-review-screen { margin-top: var(--space-5); padding: 0; border: 0; background: transparent; }.ui-review-metadata-frame, .inventory-review-metadata { padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-page); background: var(--color-surface); }
.ui-review-metadata-frame div, .inventory-review-metadata div { min-height: 97px; align-items: center; padding-left: calc(var(--space-7) * 2 + var(--space-2)); border-bottom: 1px solid var(--color-border); }
.ui-review-metadata-frame div:last-child, .inventory-review-metadata div:last-child { border-bottom: 0; }
.inventory-review-metadata dt { font-size: var(--font-size-title); }
.inventory-review-metadata dd { font-size: var(--font-size-title); }
.ui-review-stat-grid, .inventory-review-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin: var(--space-7) 0 0; }
.ui-review-stat-grid > div, .inventory-review-stats > div { min-height: 176px; display: grid; align-content: center; justify-items: center; gap: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-page); background: var(--color-surface); }
.inventory-review-stats strong { color: var(--color-text); font-size: var(--font-size-title); line-height: 1; font-variant-numeric: tabular-nums; }
.inventory-review-stats span { color: var(--color-text-muted); font-size: var(--font-size-small); }
.inventory-review-heading { margin: calc(var(--space-5) * 2) var(--space-1) var(--space-4); font-size: var(--font-size-title); }
.ui-review-category, .inventory-review-category { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-page); background: var(--color-surface); }
.inventory-review-category__head { min-height: 96px; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-2); }
.inventory-review-category__head > strong { font-size: var(--font-size-title); }
.inventory-review-lines { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-canvas-soft); }
.inventory-review-line { min-height: 102px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
.inventory-review-line h4 { margin: 0; font-size: var(--font-size-title); }
.inventory-review-line p { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--font-size-body); }
.inventory-review-line > strong { text-align: right; font-size: var(--font-size-title); }
.inventory-review-line small { display: block; margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-body); font-weight: var(--font-weight-medium); }
.inventory-review-total { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); color: var(--color-text-muted); font-size: var(--font-size-body); }
.inventory-review-total strong { color: var(--color-success); font-size: var(--font-size-title); }
.ui-review-confirmation { margin-top: calc(var(--space-5) * 2); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-page); background: var(--color-surface); }
.ui-review-confirmation .inventory-review-actions { display: grid; grid-template-columns: 1fr 1.06fr; gap: var(--space-4); margin: 0; }
.ui-review-confirmation .inventory-review-actions .inventory-secondary-btn, .ui-review-confirmation .inventory-review-actions .inventory-primary-btn { min-height: var(--control-height); font-size: var(--font-size-control); }
.ui-review-confirmation .inventory-review-verification { margin: var(--space-4) 0 0; text-align: center; color: var(--color-text-muted); font-size: var(--font-size-body); }

/* La captura es una tarea lineal: en desktop la categoría ocupa toda la
   columna operativa, igual que el comprobante de revisión. No se fragmenta
   en tarjetas paralelas, porque cada fila necesita nombre, stock y cantidad. */
@media (min-width: 521px) {
  .inventory-operation-form > .ui-tabs { margin-top: var(--space-4); }
  .inventory-operation-form .inventory-list { grid-template-columns: minmax(0, 1fr); }
}

/* Aplicación transversal para el shell y módulos previos. */
.metric-card.primary {
  color: var(--color-text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-action) 18%, var(--color-surface-raised)), var(--color-surface-raised));
  border-color: var(--color-action);
  box-shadow: var(--shadow-accent);
}
.metric-card.secondary { border-top: 2px solid color-mix(in srgb, var(--color-action) 65%, var(--color-border)); }
.metric-card.tone-green { background: var(--color-success-soft); border-color: var(--color-success); }
.metric-card.tone-yellow { background: var(--color-warning-soft); border-color: var(--color-warning); }
.metric-card.tone-red { background: var(--color-danger-soft); border-color: var(--color-danger); }
.metric-card.primary .metric-label { color: var(--color-action); opacity: 1; }
.metric-label { color: var(--color-text-muted); font-size: var(--font-size-caption); letter-spacing: .04em; }
.metric-value { color: var(--color-text); font-variant-numeric: tabular-nums; }
.metric-sub { color: var(--color-text-muted); }
.detail-row, .inventory-row, .product-row { background: var(--color-surface-raised); border-color: var(--color-border); border-radius: var(--radius-panel); box-shadow: var(--shadow); }
.compact-empty, .inventory-empty { background: transparent; border-color: var(--color-border); color: var(--color-text-muted); }
.content-stack table, .cierre-table, .quality-table { border-color: var(--color-border); }
.content-stack table th, .cierre-table th, .quality-table th { color: var(--color-text-muted); }
.inventory-configuration-editor, .inventory-catalog-editor, .inventory-user-form, .inventory-recipe-form { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); padding: var(--space-4); }
.inventory-configuration-editor-actions, .inventory-catalog-editor-header, .inventory-review-actions { gap: var(--space-3); }
.metric-card:hover { border-color: var(--color-border-strong); }
table th { color: var(--color-text-muted); }

/* Catálogo y configuración: la misma gramática de panel, lista y control que
   usa el resto del producto. Aquí viven las reglas que antes estaban
   duplicadas en el documento principal. */
.inventory-configuration-heading h3, .inventory-catalog-head h3 { margin: 0; }
.inventory-configuration-hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.inventory-configuration-hub-card { min-height: 112px; display: grid; align-content: space-between; gap: var(--space-4); padding: var(--space-3); color: var(--color-text); text-decoration: none; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-panel); transition: background-color 180ms ease-out, border-color 180ms ease-out; }
.inventory-configuration-hub-card:hover { background: var(--color-surface-hover); border-color: var(--color-border-strong); }
.inventory-configuration-mosaic { display: grid; grid-template-columns: repeat(2, 12px); gap: 3px; width: max-content; padding: 4px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.inventory-configuration-mosaic span { width: 12px; height: 12px; border-radius: var(--radius-xs); background: var(--color-action); }
.inventory-configuration-hub-card:nth-child(2) .inventory-configuration-mosaic span { background: var(--color-info); }
.inventory-configuration-hub-card:nth-child(3) .inventory-configuration-mosaic span { background: var(--color-warning); }
.inventory-configuration-hub-card:nth-child(4) .inventory-configuration-mosaic span { background: var(--color-success); }
.inventory-configuration-hub-card-label { display: flex; align-items: end; justify-content: space-between; gap: var(--space-2); }
.inventory-configuration-hub-card h4 { margin: 0; font-size: var(--font-size-body-strong); line-height: 1.2; }
.inventory-configuration-count { flex: 0 0 auto; color: var(--color-text-muted); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }

.inventory-catalog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
/* Botón "agregar" estandarizado: círculo con "+", no invasivo, en el header
   de la sección en vez de un botón rectangular de ancho completo. Un único
   componente para Catálogo, Personal y cada detalle de Configuración. */
.ui-add-fab { width: var(--control-height); min-width: var(--control-height); min-height: var(--control-height); display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--color-action); color: var(--color-action-ink); font-size: var(--font-size-title); font-weight: var(--font-weight-semibold); line-height: 1; transition: background-color 180ms ease-out, transform 180ms ease-out; }
.ui-add-fab:hover:not(:disabled) { background: var(--color-action-hover); }
.ui-add-fab:active:not(:disabled) { transform: translateY(1px); }
.ui-add-fab:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-focus) 70%, transparent); outline-offset: 2px; }
.inventory-catalog-index { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.inventory-catalog-index[hidden] { display: none; }
.inventory-catalog-toolbar { display: grid; gap: var(--space-2); }
.inventory-catalog-toolbar input, .inventory-catalog-toolbar select { min-width: 0; }
.inventory-catalog-filters { background: var(--color-canvas-soft); border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.inventory-catalog-filters summary { min-height: var(--control-height); display: flex; align-items: center; padding: 0 var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); }
.inventory-catalog-filter-fields { display: grid; gap: var(--space-2); padding: 0 var(--space-2) var(--space-2); }
.inventory-catalog-item-meta { display: flex; flex-wrap: wrap; gap: 6px; color: var(--color-text-muted); font-size: var(--font-size-caption); }
.inventory-catalog-item-meta span { padding: 3px 7px; border-radius: 999px; background: var(--color-canvas-soft); }
.inventory-catalog-daily-badge { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); box-shadow: var(--shadow-status-success); margin-right: 6px; vertical-align: middle; flex-shrink: 0; }
.inventory-catalog-daily-badge.is-off { background: transparent; border: 1.5px solid var(--color-text-muted); box-shadow: none; }
.inventory-catalog-daily-toggle { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-small); font-weight: normal; }
.inventory-catalog-daily-toggle input { width: auto; }
.inventory-catalog-empty { margin: 0; padding: var(--space-3) 0 0; color: var(--color-text-muted); font-size: var(--font-size-small); }
.inventory-catalog-editor { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.inventory-catalog-editor-header { display: flex; align-items: center; justify-content: space-between; }
.inventory-catalog-editor-header h4 { margin: 0; font-size: var(--font-size-body-strong); }
.inventory-catalog-minimum-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); }
.inventory-catalog-minimum-input input { width: 100%; }
.inventory-catalog-minimum-input span { color: var(--color-text-muted); font-size: var(--font-size-caption-strong); font-weight: var(--font-weight-semibold); white-space: nowrap; }

.inventory-configuration-detail-header { display: grid; gap: var(--space-3); }
.inventory-configuration-back { width: max-content; color: var(--color-action); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); text-decoration: none; }
.inventory-configuration-detail-title { display: flex; align-items: start; justify-content: space-between; gap: var(--space-3); }
.inventory-configuration-detail-title h3 { margin: 0; font-size: var(--font-size-title); }
.inventory-configuration-list { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.inventory-configuration-list .inventory-row { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); font-size: var(--font-size-small); }
.inventory-configuration-row-actions { display: flex; flex: 0 0 auto; gap: 6px; }
.inventory-configuration-row-actions button { min-height: var(--control-height-dense); padding: 0 var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: transparent; color: var(--color-text); font-size: var(--font-size-caption-strong); font-weight: var(--font-weight-semibold); }
.inventory-configuration-row-actions button:hover:not(:disabled) { background: var(--color-surface-hover); }
.inventory-configuration-row-actions .danger { color: var(--color-danger); }
.inventory-configuration-empty { margin: var(--space-4) 0 0; padding: var(--space-5); color: var(--color-text-muted); text-align: center; border: 1px dashed var(--color-border); border-radius: var(--radius-panel); }
.inventory-user-remove-btn { border-color: color-mix(in srgb, var(--color-danger) 62%, var(--color-border)); color: var(--color-danger); }
.inventory-user-remove-btn:hover { border-color: var(--color-danger); background: var(--color-danger-soft); }
.inventory-configuration-editor { margin-top: var(--space-4); }
.inventory-configuration-editor-actions { display: flex; flex-wrap: wrap; }

/* Personal: primero el directorio; el formulario y la cuenta se revelan solo
   cuando la persona administradora decide crear o editar un trabajador. */
.personnel-workspace { max-width: 940px; }
.personnel-directory-header { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.personnel-directory-heading { flex: 0 0 auto; }
.personnel-directory-heading h3 { margin: 0; font-size: var(--font-size-title); }
.personnel-directory-count { display: block; margin-top: var(--space-1); color: var(--color-text-subtle); font-size: var(--font-size-caption); }
.personnel-directory-search { position: relative; flex: 1 1 240px; min-width: min(100%, 220px); }
.personnel-directory-search > span { position: absolute; left: var(--space-3); top: 50%; color: var(--color-text-subtle); transform: translateY(-50%); pointer-events: none; }
.personnel-directory-search input { width: 100%; padding-left: calc(var(--space-6) + var(--space-2)); }
.personnel-directory-filters { display: flex; gap: var(--space-1); padding: var(--space-1); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-canvas-soft); }
.personnel-directory-filters button { min-height: var(--control-height-dense); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-subtle); font-size: var(--font-size-small); font-weight: var(--font-weight-medium); }
.personnel-directory-filters button:hover:not(:disabled) { color: var(--color-text); background: var(--color-surface-hover); }
.personnel-directory-filters button[aria-pressed="true"] { color: var(--color-action-ink); background: var(--color-action); font-weight: var(--font-weight-semibold); }
.personnel-directory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.personnel-directory-grid > .inventory-empty { grid-column: 1 / -1; }
.personnel-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); transition: background-color 180ms ease-out, border-color 180ms ease-out, opacity 180ms ease-out; }
.personnel-card:hover { border-color: var(--color-border-strong); background: var(--color-surface-raised); }
.personnel-card--inactive { opacity: .52; }
.personnel-card__header { display: flex; align-items: center; gap: var(--space-3); }
.personnel-avatar { position: relative; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--color-border-strong); border-radius: 50%; background: var(--color-surface-hover); color: var(--color-text-muted); font-weight: var(--font-weight-semibold); }
.personnel-avatar__fallback { grid-area: 1 / 1; }
.personnel-avatar__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--color-surface-hover); }
.personnel-avatar__image[hidden] { display: none; }
.personnel-card__avatar { width: var(--control-height); height: var(--control-height); flex: 0 0 var(--control-height); font-size: var(--font-size-body-strong); }
.personnel-card__identity { min-width: 0; flex: 1 1 auto; }
.personnel-card__name { display: block; overflow: hidden; color: var(--color-text); font-size: var(--font-size-control); text-overflow: ellipsis; white-space: nowrap; }
.personnel-card__role { display: block; margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-caption); }
.personnel-card__status { flex: 0 0 auto; margin-left: auto; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); color: var(--color-text-subtle); background: var(--color-canvas-soft); font-size: var(--font-size-micro); font-weight: var(--font-weight-semibold); letter-spacing: .06em; text-transform: uppercase; }
.personnel-card__status--active { color: var(--color-success); background: var(--color-success-soft); }
.personnel-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.personnel-card__access { display: inline-flex; align-items: center; width: max-content; max-width: 100%; padding: var(--space-1) var(--space-3); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-page); background: var(--color-canvas-soft); color: var(--color-text-subtle); font-size: var(--font-size-caption); text-overflow: ellipsis; white-space: nowrap; }
.personnel-card__access--enabled { border-color: color-mix(in srgb, var(--color-action) 45%, transparent); color: var(--color-action); }
.personnel-card__footer { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
.personnel-card__phone { min-width: 0; overflow: hidden; color: var(--color-text-subtle); font-size: var(--font-size-caption); text-overflow: ellipsis; white-space: nowrap; }
.personnel-card__footer .inventory-secondary-btn { min-height: var(--control-height-dense); margin-left: auto; padding: 0 var(--space-3); font-size: var(--font-size-caption-strong); }
@media (max-width: 759px) {
  .personnel-directory-search { flex-basis: calc(100% - var(--control-height) - var(--space-3)); }
  .personnel-directory-filters { order: 3; width: 100%; }
  .personnel-directory-filters button { flex: 1 1 0; padding-inline: var(--space-2); }
  .personnel-directory-grid { grid-template-columns: minmax(0, 1fr); }
}
.personnel-form { margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface-raised); }
.personnel-form__notes { grid-column: 1 / -1; }
.personnel-photo-field { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-canvas-soft); }
.personnel-photo-field > label { min-width: 0; }
.personnel-avatar-preview { display: grid; place-items: center; }
.personnel-avatar-preview__avatar { width: calc(var(--control-height) + var(--space-2)); height: calc(var(--control-height) + var(--space-2)); font-size: var(--font-size-control); }
.personnel-field-error { color: var(--color-danger); font-size: var(--font-size-small); line-height: 1.35; }
.personnel-duplicate-warning { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-warning); border-radius: var(--radius-control); background: var(--color-warning-soft); }
.personnel-duplicate-warning[hidden] { display: none; }
.personnel-duplicate-warning p { flex: 1 1 auto; margin: 0; color: var(--color-text); font-size: var(--font-size-small); }
.personnel-duplicate-warning .inventory-secondary-btn { flex: 0 0 auto; border-color: var(--color-warning); color: var(--color-warning); }
.personnel-account-toggle { min-height: var(--control-height); display: flex !important; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-canvas-soft); font-weight: 750; }
.personnel-account-toggle input { width: 18px; height: 18px; accent-color: var(--color-success); }
.personnel-account-fields { display: grid; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-canvas-soft); }
.personnel-permission-matrix { display: grid; gap: var(--space-3); }
.personnel-permission-group { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-raised); }
.personnel-permission-group > strong { font-size: 13px; }
.personnel-permission-group label { min-height: var(--control-height); display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: 14px; }
.personnel-permission-group input { width: 18px; height: 18px; accent-color: var(--color-success); }
.personnel-row-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-caption); }
.personnel-row-meta span { padding: var(--space-1) var(--space-2); border-radius: var(--radius-page); background: var(--color-canvas-soft); }
#personnel-directory-view[hidden], .personnel-detail[hidden], .personnel-tab-panel[hidden] { display: none; }
.personnel-detail { display: grid; gap: 0; padding: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); }
.personnel-detail-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-5); }
.personnel-detail-avatar { width: calc(var(--control-height) + var(--space-4)); height: calc(var(--control-height) + var(--space-4)); color: var(--color-text); font-size: var(--font-size-control); }
.personnel-detail-identity { min-width: 0; }
.personnel-detail-name-row { display: flex; align-items: center; gap: var(--space-2); }
.personnel-detail-name-row h3 { min-width: 0; margin: 0; overflow: hidden; font-size: var(--font-size-title); text-overflow: ellipsis; white-space: nowrap; }
.personnel-detail-identity > p { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--font-size-small); }
.personnel-detail-header > .inventory-secondary-btn { white-space: nowrap; }
.personnel-detail-tabs { display: flex; gap: var(--space-1); padding: 0 var(--space-4); overflow-x: auto; border-bottom: 1px solid var(--color-border); }
.personnel-detail-tabs button { min-height: var(--control-height); display: inline-flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--color-text-muted); font-size: var(--font-size-small); font-weight: var(--font-weight-medium); white-space: nowrap; }
.personnel-detail-tabs button:hover { color: var(--color-text); background: var(--color-surface-hover); }
.personnel-detail-tabs button[aria-selected="true"] { border-bottom-color: var(--color-action); color: var(--color-text); font-weight: var(--font-weight-semibold); }
.personnel-tab-badge { padding: var(--space-1) var(--space-2); border-radius: var(--radius-page); background: var(--color-warning-soft); color: var(--color-warning); font-size: var(--font-size-micro); font-weight: var(--font-weight-semibold); }
.personnel-tab-panel { display: grid; gap: var(--space-4); padding: var(--space-5); }
.personnel-tab-panel__heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.personnel-tab-panel__heading h4 { margin: 0; font-size: var(--font-size-control); }
.personnel-inline-edit { min-height: var(--control-height); padding: 0 var(--space-2); border: 0; background: transparent; color: var(--color-info); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); }
.personnel-inline-edit:hover { color: var(--color-text); background: var(--color-info-soft); }
.personnel-profile-data { display: grid; grid-template-columns: minmax(132px, .45fr) minmax(0, 1fr); margin: 0; border-top: 1px solid var(--color-border); }
.personnel-profile-data dt, .personnel-profile-data dd { min-height: var(--control-height); display: flex; align-items: center; margin: 0; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.personnel-profile-data dt { color: var(--color-text-muted); font-size: var(--font-size-caption); font-weight: var(--font-weight-medium); }
.personnel-profile-data dd { min-width: 0; color: var(--color-text); font-size: var(--font-size-small); overflow-wrap: anywhere; }
.personnel-detail-value--empty { color: var(--color-text-subtle); }
.personnel-edit-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.personnel-detail-empty { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-6); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-control); color: var(--color-text-muted); text-align: center; }
.personnel-detail-empty p { margin: 0; }
.personnel-detail-empty--compact { justify-items: start; padding: var(--space-4); text-align: left; }
.personnel-compensation { display: grid; gap: var(--space-4); }
.personnel-compensation-current { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.personnel-compensation-current strong { color: var(--color-text); font-size: var(--font-size-display); font-variant-numeric: tabular-nums; }
.personnel-compensation-current span { color: var(--color-text-muted); font-size: var(--font-size-caption); }
.personnel-compensation > .inventory-secondary-btn { width: max-content; }
.personnel-compensation-timeline { position: relative; display: grid; gap: var(--space-4); padding-left: var(--space-6); }
.personnel-compensation-timeline::before { content: ''; position: absolute; top: var(--space-2); bottom: var(--space-2); left: var(--space-1); width: 1px; background: var(--color-border-strong); }
.personnel-compensation-timeline__item { position: relative; display: grid; gap: var(--space-1); }
.personnel-compensation-timeline__marker { position: absolute; top: var(--space-1); left: calc((var(--space-6) - var(--space-1)) * -1); width: var(--space-2); height: var(--space-2); border-radius: 50%; background: var(--color-border-strong); }
.personnel-compensation-timeline__item--current .personnel-compensation-timeline__marker { background: var(--color-action); box-shadow: var(--shadow-status-warning); }
.personnel-compensation-timeline__item p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-caption); }
.personnel-compensation-timeline__item > strong { font-size: var(--font-size-small); font-variant-numeric: tabular-nums; }
.personnel-access-panel { display: grid; gap: var(--space-4); }
.personnel-access-state { min-height: calc(var(--control-height) + var(--space-3)); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-canvas-soft); }
.personnel-access-state__label { display: block; margin-bottom: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-caption); }
.personnel-access-state strong { overflow-wrap: anywhere; }
.personnel-access-danger { border-color: var(--color-danger) !important; color: var(--color-danger) !important; }
.personnel-access-danger:hover { background: var(--color-danger-soft) !important; }
@media (max-width: 640px) {
  .personnel-detail-header { grid-template-columns: auto minmax(0, 1fr); padding: var(--space-4); }
  .personnel-detail-header > .inventory-secondary-btn { grid-column: 1 / -1; width: 100%; }
  .personnel-detail-tabs { padding: 0 var(--space-2); }
  .personnel-tab-panel { padding: var(--space-4); }
  .personnel-profile-data { grid-template-columns: minmax(104px, .45fr) minmax(0, 1fr); }
}

/* Accesos: un editor breve por defecto. La cuenta y el alcance se ven sin
   convertir la pantalla en una pared de controles; las acciones detalladas
   aparecen únicamente cuando se necesitan. */
.access-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.access-editor-heading h3, .access-editor-section h4, .access-area-block h5 { margin: 0; }
.access-editor-heading .inventory-kicker { margin: 0 0 2px; }
.access-editor { max-width: 760px; gap: var(--space-4); }
.access-editor-section { display: grid; gap: var(--space-3); padding: 0; }
.access-editor-section + .access-editor-section { padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.access-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.access-section-heading p { margin: 0; color: var(--color-text-muted); font-size: 13px; text-align: right; }
.access-account-grid { display: grid; gap: var(--space-3); }
.access-field-hint { color: var(--color-text-muted); font-size: 12px; font-weight: 500; line-height: 1.35; }
.access-template-select { display: grid; gap: var(--space-2); max-width: 340px; }
.access-template-select select { min-height: var(--control-height); }
.access-area-block { display: grid; gap: var(--space-2); }
.access-area-block h5 { color: var(--color-text-muted); font-size: 13px; }
.access-area-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.access-area-grid label { position: relative; min-height: var(--control-height); display: flex; align-items: center; justify-content: center; padding: 0 var(--space-3); overflow: hidden; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-surface-raised); color: var(--color-text-muted); font-size: 14px; font-weight: 750; cursor: pointer; }
.access-area-grid input[type="checkbox"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.access-area-grid label:has(input:checked) { border-color: var(--color-success); background: var(--color-success-soft); color: var(--color-text); }
.access-area-grid label:has(input:focus-visible) { outline: 2px solid var(--color-success); outline-offset: 2px; }
.access-actions-panel { margin: 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.access-actions-panel > summary { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); cursor: pointer; list-style: none; font-size: 15px; font-weight: 800; }
.access-actions-panel > summary::-webkit-details-marker { display: none; }
.access-actions-panel > summary::after { content: '⌄'; color: var(--color-text-muted); font-size: 18px; transition: transform 180ms ease-out; }
.access-actions-panel[open] > summary::after { transform: rotate(180deg); }
.access-actions-panel > summary strong { margin-left: auto; color: var(--color-text-muted); font-size: 12px; font-weight: 750; }
.access-actions-panel .personnel-permission-matrix { padding-bottom: var(--space-3); }
.personnel-permission-matrix { gap: 0; }
.access-permission-group { border-top: 1px solid var(--color-border); }
.access-permission-group:first-child { border-top: 0; }
.access-permission-group > summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); cursor: pointer; list-style: none; }
.access-permission-group > summary::-webkit-details-marker { display: none; }
.access-permission-group > summary::after { content: '›'; color: var(--color-text-muted); font-size: 20px; transition: transform 180ms ease-out; }
.access-permission-group[open] > summary::after { transform: rotate(90deg); }
.access-permission-group > summary span { margin-left: auto; color: var(--color-text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.access-permission-group > div { display: grid; gap: 6px; padding: 0 0 var(--space-3); }
.access-permission-group label { min-height: var(--control-height); display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-3); border-radius: var(--radius-control); background: var(--color-surface-raised); color: var(--color-text-muted); font-size: 14px; font-weight: 650; }
.access-permission-group input { width: 18px; height: 18px; accent-color: var(--color-success); }
.access-editor-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Flujo de acceso inspirado en una ficha administrativa móvil: primero se
   identifica a la persona; después se definen sus módulos y acciones. */
.access-page-heading { display: grid; gap: 2px; margin-bottom: var(--space-4); }
.access-page-heading h2 { margin: 0; font-size: 26px; }
.access-page-heading > p:last-child { margin: 0; color: var(--color-text-muted); font-size: 15px; }
.access-editor { max-width: 860px; gap: var(--space-4); }
#access-user-data-screen, #access-permissions-screen { display: grid; gap: var(--space-4); }
#access-user-data-screen[hidden], #access-permissions-screen[hidden] { display: none; }
.access-draft-card { min-height: 100px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); }
.access-draft-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--color-action); border-radius: 50%; color: var(--color-action); font-size: 27px; font-weight: 500; }
.access-draft-card strong, .access-draft-card span { display: block; }
.access-draft-card strong { font-size: 18px; }
.access-draft-card #access-draft-status { margin-top: 3px; color: var(--color-action); font-size: 14px; }
.access-draft-badge { padding: 6px 10px; border: 1px solid var(--color-border-strong); border-radius: 999px; color: var(--color-text-muted); font-size: 12px; font-weight: 750; }
.access-form-card { display: grid; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); }
.access-card-heading { display: grid; gap: 3px; }
.access-card-heading h3 { margin: 0; font-size: 22px; }
.access-card-heading p { margin: 0; color: var(--color-text-muted); font-size: 14px; }
.access-area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.access-area-card { min-height: 64px; justify-content: flex-start; gap: var(--space-2); padding: 0 var(--space-3); font-size: 15px; }
.access-area-card::before { content: '□'; color: var(--color-text-muted); font-size: 24px; line-height: 1; }
.access-area-card b { width: 26px; height: 26px; display: none; place-items: center; margin-left: auto; border-radius: 50%; background: var(--color-success); color: var(--color-canvas); font-size: 15px; }
.access-area-card:has(input:checked) { border-color: var(--color-success); background: var(--color-success-soft); }
.access-area-card:has(input:checked)::before { content: '▣'; color: var(--color-success); }
.access-area-card:has(input:checked) b { display: grid; }
.access-data-actions { position: sticky; bottom: var(--space-2); z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: color-mix(in srgb, var(--color-surface) 92%, transparent); backdrop-filter: blur(10px); }
.access-data-actions .inventory-primary-btn, .access-save-bar .inventory-primary-btn { min-height: 54px; font-size: 16px; }
.access-data-actions .inventory-primary-btn span, .access-save-bar .inventory-primary-btn span { margin-left: var(--space-2); font-size: 24px; line-height: 0; }
.access-permissions-heading { display: grid; gap: var(--space-2); }
#access-permissions-screen { scroll-margin-top: 120px; }
.access-permissions-heading h2 { margin: 0; font-size: 24px; letter-spacing: -0.025em; text-wrap: balance; }
.access-permissions-heading p { margin: 0; color: var(--color-text-muted); font-size: 14px; }
.access-permissions-heading .inventory-secondary-btn { width: max-content; min-height: var(--control-height); }
.access-permissions-help { padding-top: var(--space-2); border-top: 1px solid var(--color-border); line-height: 1.45; }
.access-permissions-meta { display: grid; gap: 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.access-permissions-meta > div { min-height: 48px; display: grid; grid-template-columns: minmax(104px, .65fr) minmax(0, 1fr); align-items: center; gap: var(--space-3); border-top: 1px solid var(--color-border); }
.access-permissions-meta > div:first-child { border-top: 0; }
.access-permissions-meta span { color: var(--color-text-muted); font-size: 13px; }
.access-permissions-meta strong { text-align: right; font-size: 15px; }
.access-summary-modules { display: flex !important; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.access-summary-modules span { padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 750; }
.access-summary-modules .access-module-chip { border: 1px solid var(--color-success); background: var(--color-success-soft); color: var(--color-text); }
.access-summary-modules .access-module-empty { border: 1px solid var(--color-border-strong); background: var(--color-surface-raised); color: var(--color-text-muted); }
.access-permission-matrix { gap: 0; border-top: 1px solid var(--color-border); }
.access-permission-group { overflow: hidden; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; background: transparent; }
.access-permission-group:first-child { border-top: 0; }
.access-permission-group > summary { min-height: 62px; padding: 0 var(--space-1); }
.access-permission-group > summary > span:nth-child(2) { display: grid; gap: 2px; }
.access-permission-group > summary strong { font-size: 16px; }
.access-permission-group > summary small { color: var(--color-text-muted); font-size: 12px; }
.access-permission-group > summary::after { margin-left: auto; }
.access-permission-group > .access-permission-actions { display: grid; gap: 0; padding: 0 0 var(--space-2); border-top: 1px solid var(--color-border); }
.access-permission-row { min-height: 52px; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-2); color: var(--color-text); font-size: 15px; font-weight: 650; }
.access-permission-group .access-permission-row { min-height: 52px; padding: 0 var(--space-2); border-radius: 0; background: transparent; color: var(--color-text); font-size: 15px; font-weight: 650; }
.access-permission-row + .access-permission-row { border-top: 1px solid var(--color-border); }
.access-permission-group .access-permission-row input {
  appearance: none; -webkit-appearance: none; margin: 0;
  width: 22px; height: 22px; border-radius: 6px;
  border: 1.5px solid var(--color-border-strong); background: var(--color-surface-raised);
  position: relative; cursor: pointer; flex: none;
  transition: background 120ms ease-out, border-color 120ms ease-out;
}
.access-permission-group .access-permission-row input:checked { background: var(--color-success); border-color: var(--color-success); }
.access-permission-group .access-permission-row input:checked::after {
  content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 12px;
  border: solid #08130d; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.access-permission-group .access-permission-row input:focus-visible { outline: 2px solid var(--color-action); outline-offset: 2px; }
.permission-master-row { display: flex; align-items: center; min-height: 44px; cursor: pointer; }
.access-permission-group input.permission-master-toggle,
.personnel-admin-toggle-row input.permission-master-toggle {
  appearance: none; -webkit-appearance: none; margin: 0;
  width: 44px; height: 26px; border-radius: 999px; background: var(--color-border-strong);
  position: relative; cursor: pointer; flex: none;
  transition: background 150ms ease-out;
}
.access-permission-group input.permission-master-toggle::after,
.personnel-admin-toggle-row input.permission-master-toggle::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  transition: transform 150ms ease-out;
}
.access-permission-group input.permission-master-toggle:checked,
.personnel-admin-toggle-row input.permission-master-toggle:checked { background: var(--color-success); }
.access-permission-group input.permission-master-toggle:checked::after,
.personnel-admin-toggle-row input.permission-master-toggle:checked::after { transform: translateX(18px); }
.access-permission-group input.permission-master-toggle:focus-visible,
.personnel-admin-toggle-row input.permission-master-toggle:focus-visible { outline: 2px solid var(--color-action); outline-offset: 2px; }
.personnel-admin-toggle-row { display: flex; align-items: center; gap: var(--space-3); min-height: 62px; padding: 0 var(--space-1); border-bottom: 1px solid var(--color-border); }
.personnel-admin-toggle-row strong { display: block; font-size: 16px; }
.personnel-admin-toggle-row small { display: block; color: var(--color-text-muted); font-size: 12px; }
.area-chip-label { margin: var(--space-3) 0 var(--space-1); font-size: 13px; font-weight: 650; color: var(--color-text-muted); }
.area-chip-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.area-chip {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong); border-radius: 999px;
  background: var(--color-surface-raised); color: var(--color-text-muted);
  font-size: 14px; font-weight: 650; cursor: pointer;
  transition: background 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}
.area-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.area-chip:has(input:checked) { background: color-mix(in srgb, var(--color-success) 18%, transparent); border-color: var(--color-success); color: var(--color-text); }
.area-chip:has(input:focus-visible) { outline: 2px solid var(--color-action); outline-offset: 2px; }
.personnel-accounts-disclosure { margin-top: var(--space-4); }
.personnel-accounts-disclosure > summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) 0; }
.personnel-accounts-disclosure > summary::-webkit-details-marker { display: none; }
.personnel-accounts-disclosure > summary::before { content: '›  '; color: var(--color-text-muted); }
.personnel-accounts-disclosure[open] > summary::before { content: '⌄  '; }
.personnel-accounts-disclosure > summary strong { font-size: 15px; color: var(--color-text); }
.personnel-accounts-disclosure > summary span { font-size: 13px; color: var(--color-text-muted); font-weight: 500; }
.access-save-bar { position: sticky; bottom: 0; z-index: 3; display: grid; gap: var(--space-2); padding: var(--space-3) 0 max(var(--space-3), env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--color-border); border-radius: 0; background: var(--color-surface); }
.access-save-bar > span { display: flex; align-items: center; justify-content: center; gap: var(--space-2); color: var(--color-text-muted); font-size: 14px; }
.access-save-bar > span strong:first-child { color: var(--color-success); }
.access-save-bar i { font-style: normal; }

@media (min-width: 760px) {
  .access-account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .access-account-grid label:last-child { grid-column: span 2; max-width: calc(50% - var(--space-2)); }
}

@media (min-width: 760px) {
  .inventory-configuration-hub-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .inventory-catalog-toolbar { grid-template-columns: minmax(240px, 1fr) 190px; }
  .inventory-catalog-filter-fields { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .ui-page-title { font-size: var(--font-size-title); }
  .doc-header { grid-template-columns: 1fr; padding: var(--space-3); }
  .capture-evidence { align-items: flex-start; flex-direction: column; }
  .capture-row { grid-template-columns: minmax(0, 1fr) 112px; padding: var(--space-3); }
  .capture-row__stock { grid-column: 1; grid-row: 2; text-align: left; }
  .capture-row__quantity { grid-column: 2; grid-row: 1 / span 2; }
  .capture-presentation { grid-column: 1 / -1; grid-template-columns: 1fr; margin-left: 0; }
  .sticky-footer { gap: var(--space-2); }
  .ui-product-row { grid-template-columns: 1fr; }
  .ui-product-row > :last-child { justify-self: stretch; }
  .ui-sticky-action { padding: var(--space-2); }
  .ui-sticky-action .ui-button { min-width: 164px; }
  .inventory-operation-form .ui-product-row { grid-template-columns: 1fr; }
  .inventory-operation-form .ui-stepper { max-width: 100%; }
  .inventory-operation-form .ui-sticky-action { align-items: stretch; }
  .inventory-operation-form .ui-sticky-action .inventory-primary-btn { min-width: 0; flex: 1; }
  .inventory-operation-hub { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .inventory-operation-form #inventory-operation-items { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .inventory-operation-form > .ui-tabs { min-height: 56px; }
  .inventory-operation-form .ui-tab { min-height: var(--control-height); font-size: var(--font-size-control); }
  .inventory-operation-form .ui-search { min-height: 62px; padding-inline: var(--space-3); }
  .inventory-operation-form .ui-search input { font-size: var(--font-size-control); }
  .inventory-operation-form .ui-search span { font-size: var(--font-size-title); }
  .inventory-operation-form .inventory-operation-filter-row .inventory-secondary-btn { min-height: var(--control-height); padding-inline: var(--space-3); font-size: var(--font-size-small); }
  .inventory-operation-form .ui-accordion__summary { min-height: 70px; padding-inline: var(--space-3); }
  .inventory-operation-form .ui-category-mark { width: 44px; height: 44px; font-size: var(--font-size-body); }
  .inventory-operation-form .ui-accordion__summary > strong { font-size: var(--font-size-title); }
  .inventory-operation-form .ui-product-row { min-height: 0; grid-template-columns: minmax(0, 1fr) 146px; align-items: center; padding: var(--space-4); }
  .inventory-operation-form .ui-product-row__name { font-size: var(--font-size-body-strong); }
  .inventory-operation-form .ui-meta, .inventory-operation-form .ui-product-row__stock { font-size: var(--font-size-small); }
  .inventory-operation-form .ui-stepper { min-height: var(--control-height); grid-template-columns: var(--control-height) minmax(0, 1fr) var(--control-height); }
  .inventory-operation-form .ui-stepper button { font-size: var(--font-size-title); }
  .inventory-operation-form .ui-stepper input { font-size: var(--font-size-title); }
  .inventory-operation-form .ui-sticky-action { width: calc(100vw - 20px); min-height: 70px; padding: var(--space-2) var(--space-3); }
  .inventory-operation-form .ui-sticky-action .inventory-primary-btn { min-width: 0; min-height: var(--control-height); font-size: var(--font-size-control); }
  .inventory-operation-form #inventory-operation-review-screen { margin-top: var(--space-3); }
  .ui-review-metadata-frame, .inventory-review-metadata { padding: var(--space-3); }
  .ui-review-metadata-frame div, .inventory-review-metadata div { min-height: 48px; padding-left: 46px; }
  .inventory-review-meta-icon { left: 12px; width: 22px; font-size: var(--font-size-title); }
  .inventory-review-metadata dt { font-size: var(--font-size-body); }
  .inventory-review-metadata dd { font-size: var(--font-size-control); }
  .ui-review-stat-grid, .inventory-review-stats { gap: var(--space-3); margin-top: var(--space-4); }
  .ui-review-stat-grid > div, .inventory-review-stats > div { min-height: 92px; }
  .inventory-review-stats strong { font-size: var(--font-size-title); }
  .inventory-review-stats span { font-size: var(--font-size-small); }
  .inventory-review-heading { margin: var(--space-5) var(--space-1) var(--space-3); font-size: var(--font-size-title); }
  .ui-review-category, .inventory-review-category { padding: var(--space-3); }
  .inventory-review-category__head > strong { font-size: var(--font-size-title); }
  .inventory-review-line { min-height: 76px; padding: var(--space-3); }
  .inventory-review-line h4 { font-size: var(--font-size-title); }
  .inventory-review-line p, .inventory-review-line small { font-size: var(--font-size-small); }
  .inventory-review-line > strong { font-size: var(--font-size-title); }
  .inventory-review-total { padding: var(--space-3); font-size: var(--font-size-small); }
  .inventory-review-total strong { font-size: var(--font-size-control); }
  .ui-review-confirmation { margin-top: var(--space-5); padding: var(--space-3); }
  .ui-review-confirmation .inventory-review-actions { gap: var(--space-2); }
  .ui-review-confirmation .inventory-review-actions .inventory-secondary-btn, .ui-review-confirmation .inventory-review-actions .inventory-primary-btn { min-height: var(--control-height); padding-inline: var(--space-2); font-size: var(--font-size-body); }
  .ui-review-confirmation .inventory-review-verification { font-size: var(--font-size-small); }
  .inventory-configuration-detail-title { align-items: center; }
  .inventory-configuration-detail-title .inventory-primary-btn { min-height: var(--control-height); padding-inline: var(--space-3); font-size: var(--font-size-small); }
  .inventory-configuration-row-actions { gap: 4px; }
  .inventory-configuration-row-actions button { min-height: var(--control-height); padding-inline: 7px; }
  .access-editor-heading { align-items: end; }
  .access-editor-heading .inventory-secondary-btn { min-height: 40px; padding-inline: var(--space-3); }
  .access-section-heading { display: grid; gap: 3px; }
  .access-section-heading p { text-align: left; }
  .access-page-heading h2, .access-permissions-heading h2 { font-size: 23px; }
  .access-form-card { padding: var(--space-3); }
  .access-card-heading h3 { font-size: 20px; }
  .access-draft-card { min-height: 86px; padding: var(--space-3); }
  .access-draft-badge { display: none !important; }
}

@media (max-width: 759px) {
  .icon-btn { width: var(--control-height); min-height: var(--control-height); }
  .inventory-operation-filter-row .inventory-secondary-btn,
  .inventory-configuration-row-actions button { min-height: var(--control-height); }
}

@media (min-width: 640px) {
  .access-account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .access-account-grid label:last-child { grid-column: span 2; }
  .access-data-actions, .access-save-bar { grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr); align-items: center; }
  .access-data-actions .inventory-primary-btn { grid-column: 2; }
  .access-save-bar > span { justify-content: flex-start; }
}

@media (max-width: 380px) {
  .inventory-operation-form .ui-product-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto; transition-duration: 0.01ms !important; animation-duration: 0.01ms; animation-iteration-count: 1; }
}

/* Fase 2: la navegación entre operaciones vive en el menú lateral; el
   cuadro de pestañas y las tarjetas de acción repetidas estorban, se ocultan.
   El formulario de operación sigue accesible desde los enlaces del sidebar. */
#inventory-operation-tabs,
#inventory-operation-heading,
#inventory-operation-grid { display: none; }
/* Cuando el panel de operación queda vacío (sin flujo activo ni revisión),
   no debe mostrarse como una tarjeta vacía. */
.inventory-operation-hub[hidden] { display: none; }

/* ===== Inventario · Existencias (Fase 1) ============================== */
.inventory-stock { display: grid; gap: var(--space-2); }
.inventory-filter-bar { display: grid; gap: var(--space-2); }
.inventory-filter-bar__row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex-wrap: wrap; }
.inventory-filter-bar__categories, .inventory-filter-bar__extras { align-items: flex-start; }
.inventory-filter-chips { display: flex; gap: var(--space-2); flex: 1 1 auto; flex-wrap: wrap; }
.inventory-filter-summary { margin: 0 0 0 auto; color: var(--color-text-subtle); font-size: var(--font-size-caption); white-space: nowrap; }
.inventory-filter-summary button { padding: 0; border: 0; background: transparent; color: var(--color-info); font: inherit; font-weight: var(--font-weight-semibold); cursor: pointer; }
.inventory-filter-bar--recipes { margin-bottom: var(--space-2); }
.inventory-filter-bar__spacer { flex: 1 1 auto; }
.inventory-filter-chip { min-height: var(--control-height); padding: 0 var(--space-3); border: 0; border-radius: 999px; background: var(--color-surface-hover); color: var(--color-text-muted); font: inherit; font-size: var(--font-size-caption-strong); font-weight: var(--font-weight-semibold); cursor: pointer; transition: background-color 160ms ease-out, color 160ms ease-out; }
.inventory-filter-chip:hover { background: var(--color-surface-active); color: var(--color-text); }
.inventory-filter-chip.is-active { background: var(--color-info-soft); color: var(--color-info); }
.inventory-filter-chip:focus-visible, .inventory-filter-select:focus-visible, .inventory-filter-summary button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.inventory-filter-select { min-height: var(--control-height); max-width: 190px; padding-inline: var(--space-2); border: 0; border-radius: var(--radius-control); background: var(--color-surface-hover); color: var(--color-text); font: inherit; }
.inventory-filter-field { min-width: 0; color: var(--color-text-muted); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); }
.inventory-filter-field input { min-height: var(--control-height); }
.inventory-filter-date-range { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.inventory-catalog-item-search { flex: 1 1 auto; min-width: 0; min-height: var(--control-height); }
.inventory-filter-summary button { min-height: var(--control-height); padding-inline: var(--space-2); }
@media (max-width: 759px) { .inventory-filter-summary { margin-left: 0; } .inventory-filter-date-range { flex-basis: 100%; } }
.ui-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Barra compacta: buscador (crece) + área activa + refrescar en una sola fila.
   min-width: 0 evita que el ancestro grid crezca al max-content de la fila
   (si no, en pantallas angostas la fila se corta en vez de encoger el buscador). */
.inventory-stock-toolbar { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }

/* Selects con el estilo del sistema (no la apariencia nativa del navegador). */
.inventory-stock-select {
  appearance: none; -webkit-appearance: none;
  min-height: var(--control-height-dense);
  padding: 0 30px 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background-color: var(--color-canvas-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab5c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 13px;
  color: var(--color-text); font: inherit; font-size: var(--font-size-small); cursor: pointer;
}
.inventory-stock-select:hover { border-color: var(--color-border-strong); }
.inventory-stock-select:focus-visible { outline: none; border-color: var(--color-focus); box-shadow: var(--shadow-focus); }
.inventory-stock-select--area { font-weight: var(--font-weight-medium); flex: 0 0 auto; max-width: 132px; }

.inventory-stock-toolbar .inventory-stock-search { flex: 1 1 auto; min-width: 0; }
.inventory-stock-search.ui-search { min-height: var(--control-height); border-radius: var(--radius-control); }
.inventory-stock-refresh { flex: 0 0 auto; }
.inventory-stock-filters { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.inventory-stock-filters .inventory-stock-select { flex: 1 1 140px; min-width: 0; }

/* Alertas compactas: chips en una sola línea (scroll horizontal si no caben),
   solo las que tienen valor. Tocar un chip filtra la lista a esos productos. */
.inventory-stock-alertbar { display: flex; gap: var(--space-2); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 1px; }
.inventory-stock-alertbar::-webkit-scrollbar { display: none; }
.inventory-stock-alertbar:empty { display: none; }
.stock-alert-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-canvas-soft); color: var(--color-text-muted); font: inherit; font-size: var(--font-size-caption); line-height: 1.5; cursor: pointer; }
.stock-alert-chip:hover { border-color: var(--color-border-strong); }
.stock-alert-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-subtle); }
.stock-alert-chip b { font-variant-numeric: tabular-nums; }
.stock-alert-chip[data-tone="danger"] { background: var(--color-danger-soft); border-color: color-mix(in srgb, var(--color-danger) 35%, transparent); color: var(--color-danger); }
.stock-alert-chip[data-tone="danger"]::before { background: var(--color-danger); }
.stock-alert-chip[data-tone="warning"] { background: var(--color-warning-soft); border-color: color-mix(in srgb, var(--color-warning) 35%, transparent); color: var(--color-warning); }
.stock-alert-chip[data-tone="warning"]::before { background: var(--color-warning); }
.stock-alert-chip[data-tone="success"] { background: var(--color-success-soft); border-color: color-mix(in srgb, var(--color-success) 35%, transparent); color: var(--color-success); }
.stock-alert-chip[data-tone="success"]::before { background: var(--color-success); }
.stock-alert-chip[aria-pressed="true"] { outline: 2px solid var(--color-action); outline-offset: 1px; }

/* Historial administrativo (Fase 3) */
.inventory-history { min-width: 0; }
.inventory-history-panel { display: grid; gap: var(--space-3); }
.inventory-history-panel[hidden] { display: none; }
.inventory-history-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: var(--space-2); align-items: end; }
.inventory-history-filters .ui-field { min-width: 0; color: var(--color-text-muted); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); }
.inventory-history-filters .inventory-stock-select { width: 100%; }
@media (max-width: 759px) {
  .inventory-history-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-history-filters .icon-btn { grid-column: 2; justify-self: end; }
}
.inventory-history-list { display: grid; gap: var(--space-2); }
.inventory-history-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-raised); }
.inventory-history-row__main { display: grid; gap: 1px; min-width: 0; }
.inventory-history-row__main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-history-row__qty { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-semibold); white-space: nowrap; }
.inventory-history-row__qty.is-positive { color: var(--color-success); }
.inventory-history-row__qty.is-negative { color: var(--color-danger); }
.inventory-history-row__qty small { color: var(--color-text-muted); font-weight: var(--font-weight-regular); }
.inventory-history-change { font-variant-numeric: tabular-nums; }
.inventory-history-change strong { color: var(--color-action); font-weight: var(--font-weight-semibold); white-space: normal; }
.inventory-history-kind { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 9px; font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); border: 1px solid transparent; white-space: nowrap; }
.inventory-history-kind[data-tone="success"] { background: var(--color-success-soft); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 35%, transparent); }
.inventory-history-kind[data-tone="danger"] { background: var(--color-danger-soft); color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 35%, transparent); }
.inventory-history-kind[data-tone="info"] { background: var(--color-info-soft); color: var(--color-info); border-color: color-mix(in srgb, var(--color-info) 35%, transparent); }
.inventory-history-kind[data-tone="warning"] { background: var(--color-warning-soft); color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 35%, transparent); }

/* Recetas POS · cola de trabajo y editor (Fase C-1). */
.inventory-recipe-section { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.inventory-recipe-section__header { align-items: flex-start; }
.inventory-recipe-section__header h4 { margin: 0; color: var(--color-text); }
.inventory-recipe-section__header p { margin: 2px 0 0; color: var(--color-text-subtle); font-size: var(--font-size-caption); }
.inventory-recipe-section--secondary { padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.inventory-recipe-queue { display: grid; gap: var(--space-2); }
.inventory-recipe-queue__row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-raised); }
.inventory-recipe-queue__row--top { border-color: var(--color-action); background: color-mix(in srgb, var(--color-action) 8%, var(--color-surface-raised)); box-shadow: inset 3px 0 0 var(--color-action); }
.inventory-recipe-queue__rank { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: var(--color-surface-hover); color: var(--color-text-muted); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.inventory-recipe-queue__row--top .inventory-recipe-queue__rank { background: var(--color-action); color: var(--color-action-ink); }
.inventory-recipe-queue__product, .inventory-recipe-queue__sold { display: grid; gap: 2px; min-width: 0; }
.inventory-recipe-queue__product strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-recipe-queue__product span, .inventory-recipe-queue__sold span { color: var(--color-text-subtle); font-size: var(--font-size-caption); }
.inventory-recipe-queue__sold { text-align: right; font-variant-numeric: tabular-nums; }
.inventory-recipe-clone { display: flex; align-items: end; gap: var(--space-2); flex-wrap: wrap; }
.inventory-recipe-clone label { min-width: min(260px, 100%); }
.inventory-recipe-queue__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; }
.inventory-recipe-queue__footer { display: flex; justify-content: flex-end; padding-top: var(--space-1); }
.inventory-recipe-editor-zone { gap: var(--space-3); }
.inventory-recipe-editor { gap: var(--space-3); }
.inventory-recipe-editor__header { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(220px, 1.35fr) minmax(145px, .6fr) minmax(300px, 1.35fr); gap: var(--space-2); align-items: end; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-canvas-soft); }
.inventory-recipe-editor__header > label, .inventory-recipe-editor__header .inventory-recipe-clone label, .recipe-line-row label { display: grid; gap: var(--space-1); min-width: 0; color: var(--color-text-muted); font-size: var(--font-size-caption-strong); font-weight: var(--font-weight-semibold); }
.inventory-recipe-editor__heading { align-self: center; }
.inventory-recipe-editor__heading h4 { margin: 0; color: var(--color-text); }
.inventory-recipe-editor__heading p { margin: 2px 0 0; color: var(--color-text-subtle); font-size: var(--font-size-caption); }
.inventory-recipe-editor__header .inventory-recipe-clone { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: end; min-width: 0; }
.inventory-recipe-editor__header .inventory-recipe-clone label { min-width: 0; }
.recipe-line-row { display: grid; grid-template-columns: minmax(200px, 1.5fr) minmax(180px, 1fr) minmax(120px, .55fr) 38px; gap: var(--space-2); align-items: end; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-raised); }
.recipe-line-row__remove { min-width: 38px; width: 38px; padding: 0; font-size: 20px; line-height: 1; }
.inventory-recipe-editor__actions { margin-top: 0; }
.inventory-recipe-review { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.inventory-pos-aliases > summary, .inventory-manual-apply > summary, .inventory-recipe-coverage__products > summary { cursor: pointer; color: var(--color-text); font-weight: var(--font-weight-semibold); }
.inventory-pos-aliases > summary:focus-visible, .inventory-manual-apply > summary:focus-visible, .inventory-recipe-coverage__products > summary:focus-visible { border-radius: var(--radius-sm); outline: 2px solid var(--color-focus); outline-offset: 4px; }
.inventory-collapsible__body { display: grid; gap: var(--space-3); padding-top: var(--space-3); }
.inventory-pos-manual-apply-form { grid-template-columns: minmax(220px, 1fr) auto; align-items: end; gap: var(--space-2); }
.inventory-pos-aliases { gap: var(--space-2); }
.inventory-pos-alias-list { display: grid; gap: var(--space-2); }
.inventory-pos-alias-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-canvas-soft); }
.inventory-pos-alias-row__route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--font-size-small); }
.inventory-pos-alias-row__route span, .inventory-pos-alias-row__route strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-pos-alias-row__route span { color: var(--color-text-muted); }
.inventory-pos-alias-row__route b { color: var(--color-action); }
.inventory-pos-alias-form { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr) auto; gap: var(--space-2); align-items: end; }
.inventory-pos-alias-form label { display: grid; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-caption-strong); font-weight: var(--font-weight-semibold); }
.inventory-pos-alias-form input, .inventory-pos-alias-form select { min-height: var(--control-height); width: 100%; padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-surface-raised); color: var(--color-text); font: inherit; }
.inventory-pos-alias-form input:focus-visible, .inventory-pos-alias-form select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 720px) {
  .inventory-recipe-queue__row { grid-template-columns: 32px minmax(0, 1fr); }
  .inventory-recipe-queue__sold { grid-column: 2; text-align: left; }
  .inventory-recipe-queue__actions { grid-column: 2; justify-content: flex-start; }
  .inventory-recipe-editor__header { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-recipe-editor__heading, .inventory-recipe-editor__header .inventory-recipe-clone { grid-column: 1 / -1; }
  .inventory-recipe-clone { width: 100%; align-items: stretch; }
  .recipe-line-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recipe-line-row__remove { justify-self: end; }
  .inventory-pos-manual-apply-form { grid-template-columns: 1fr; }
  .inventory-pos-manual-apply-form button { justify-self: start; }
  .inventory-pos-alias-form { grid-template-columns: 1fr; }
  .inventory-pos-alias-form button { justify-self: start; }
  .inventory-pos-alias-row { grid-template-columns: 1fr; }
  .inventory-pos-alias-row > button { justify-self: start; }
}
/* Recetas POS · modo sombra (Fase C-2): simulación sin escritura. */
.inventory-shadow { display: grid; gap: var(--space-4); }
.inventory-shadow[hidden] { display: none; }
.inventory-shadow__header { gap: var(--space-4); }
.inventory-shadow-status { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 34px; padding: 0 var(--space-3); border: 1px solid color-mix(in srgb, var(--color-warning) 40%, var(--color-border)); border-radius: 999px; background: var(--color-warning-soft); color: var(--color-warning); font-size: var(--font-size-caption-strong); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.inventory-shadow-status > span { width: 8px; height: 8px; border-radius: 999px; background: currentColor; box-shadow: var(--shadow-status-warning); }
.inventory-shadow-form { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)) auto; gap: var(--space-3); align-items: end; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-canvas-soft); }
.inventory-shadow-form label { display: grid; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-caption-strong); font-weight: var(--font-weight-semibold); }
.inventory-shadow-form input { min-height: var(--control-height); padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-surface-raised); color: var(--color-text); font: inherit; color-scheme: dark; }
.inventory-shadow-form input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.inventory-shadow-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.inventory-shadow-meta > strong { color: var(--color-text); font-variant-numeric: tabular-nums; }
.inventory-shadow-meta .inventory-status { margin: 0; }
.inventory-shadow-table-wrap { border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.inventory-shadow-table { min-width: 780px; }
.inventory-shadow-table th:not(:first-child), .inventory-shadow-table td:not(:first-child) { text-align: right; }
.inventory-shadow-table td { vertical-align: top; font-variant-numeric: tabular-nums; }
.inventory-shadow-table__item { display: grid; gap: 2px; text-align: left; }
.inventory-shadow-table__item small, .inventory-shadow-table__breakdown small { color: var(--color-text-subtle); }
.inventory-shadow-table__breakdown { display: grid; gap: 2px; justify-items: end; }
.inventory-shadow-table__difference { font-weight: var(--font-weight-semibold); }
.inventory-shadow-table__difference[data-tone="positive"] { color: var(--color-success); }
.inventory-shadow-table__difference[data-tone="negative"] { color: var(--color-danger); }
.inventory-shadow-uncovered { display: grid; gap: var(--space-2); padding-top: var(--space-2); }
.inventory-shadow-uncovered h5 { margin: 0; color: var(--color-text); }
.inventory-shadow-uncovered__list { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.inventory-shadow-uncovered__item { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-3); border: 1px solid color-mix(in srgb, var(--color-danger) 35%, var(--color-border)); border-radius: 999px; background: var(--color-danger-soft); color: var(--color-text); font-size: var(--font-size-caption); }
.inventory-shadow-uncovered__item strong { font-variant-numeric: tabular-nums; }
.inventory-shadow__empty { padding: var(--space-4); color: var(--color-text-subtle); text-align: center !important; }
.inventory-shadow-weekly { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.inventory-shadow-weekly__header { align-items: flex-start; }
.inventory-shadow-weekly__header h5 { margin: 0; color: var(--color-text); font-size: var(--font-size-body-strong); }
.inventory-shadow-weekly__header p { margin: var(--space-1) 0 0; max-width: 720px; color: var(--color-text-muted); }
.inventory-shadow-weekly__header .inventory-status { margin: 0; }
.inventory-shadow-weekly__table-wrap { border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.inventory-shadow-weekly__table { min-width: 660px; }
.inventory-shadow-weekly__table td { vertical-align: top; }
.inventory-shadow-weekly__week { display: grid; gap: 2px; }
.inventory-shadow-weekly__week small { color: var(--color-text-subtle); }
.inventory-shadow-weekly__coverage { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; padding: 5px var(--space-2); border: 1px solid currentColor; border-radius: 999px; font-size: var(--font-size-caption-strong); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.inventory-shadow-weekly__coverage[data-tone="success"] { color: var(--color-success); background: var(--color-success-soft); }
.inventory-shadow-weekly__coverage[data-tone="warning"] { color: var(--color-warning); background: var(--color-warning-soft); }
.inventory-shadow-weekly__coverage[data-tone="danger"] { color: var(--color-danger); background: var(--color-danger-soft); }
.inventory-shadow-weekly__differences { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.inventory-shadow-weekly__difference { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.inventory-shadow-weekly__difference strong { color: var(--color-text); }
.inventory-shadow-weekly__difference span { color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.inventory-shadow-weekly__empty { padding: var(--space-4); color: var(--color-text-subtle); text-align: center; }
@media (max-width: 720px) {
  .inventory-shadow__header { align-items: stretch; }
  .inventory-shadow-status { align-self: flex-start; white-space: normal; }
  .inventory-shadow-form { grid-template-columns: 1fr 1fr; }
  .inventory-shadow-form button { grid-column: 1 / -1; justify-self: start; }
}
/* Recetas POS · cobertura (Fase 4): qué platos tienen receta y cuáles no. */
.inventory-recipe-coverage { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); }
.inventory-recipe-coverage__summary { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.inventory-recipe-coverage__products { margin-top: var(--space-1); }
.inventory-recipe-coverage__products > summary { width: max-content; }
.inventory-recipe-coverage__list { display: grid; gap: var(--space-1); max-height: 280px; overflow-y: auto; }
.inventory-recipe-coverage__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-raised); cursor: pointer; font: inherit; color: inherit; text-align: left; }
.inventory-recipe-coverage__row:hover, .inventory-recipe-coverage__row:focus-visible { border-color: var(--color-border-strong); background: var(--color-surface-hover); outline: none; }
.inventory-recipe-coverage__main { display: grid; gap: 1px; min-width: 0; }
.inventory-recipe-coverage__main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipe-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 9px; font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); border: 1px solid transparent; white-space: nowrap; }
.recipe-pill--con { background: var(--color-success-soft); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 35%, transparent); }
.recipe-pill--pendiente { background: var(--color-warning-soft); color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 35%, transparent); }
.recipe-pill--sin { background: var(--color-danger-soft); color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 35%, transparent); }

.inventory-stock-list { display: grid; gap: var(--space-4); }
.inventory-stock-group { display: grid; gap: var(--space-2); }
.inventory-stock-group__head { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); margin: var(--space-2) 2px 0; font-size: var(--font-size-caption-strong); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-subtle); }
.inventory-stock-group__count { font-variant-numeric: tabular-nums; color: var(--color-text-subtle); }
.inventory-stock-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-raised); color: inherit; }
.inventory-stock-row:hover { border-color: var(--color-border-strong); background: var(--color-surface-hover); }
.inventory-stock-row__detail { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); align-items: center; min-width: 0; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; text-align: left; }
.inventory-stock-row__detail:focus-visible { border-radius: var(--radius-sm); outline: 2px solid var(--color-action); outline-offset: 4px; }
.inventory-stock-row__main { display: grid; gap: 2px; min-width: 0; }
.inventory-stock-row__name { font-weight: var(--font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-stock-row__meta { font-size: var(--font-size-caption); color: var(--color-text-subtle); }
.inventory-stock-row__qty { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-semibold); }
.inventory-stock-row__qty small { font-weight: var(--font-weight-regular); color: var(--color-text-muted); }
.inventory-stock-row__pills { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.inventory-stock-row__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.inventory-stock-row__actions:empty { display: none; }
.inventory-stock-action { min-height: var(--control-height-dense); padding: 0 var(--space-3); font-size: var(--font-size-caption-strong); white-space: nowrap; }

.stock-pill { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 10px; font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); border: 1px solid transparent; white-space: nowrap; }
/* Estados nominales (disponible/reciente) en fantasma: la alarma visual se
   reserva para bajo/agotado/pendiente, que son los que exigen accion. */
.stock-pill--disponible, .stock-pill--reciente { background: transparent; color: var(--color-text-subtle); border-color: var(--color-border); font-weight: var(--font-weight-medium); }
.stock-pill--bajo, .stock-pill--sin_minimo, .stock-pill--pendiente_conteo { background: var(--color-warning-soft); color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 35%, transparent); }
.stock-pill--agotado, .stock-pill--diferencia_pendiente { background: var(--color-danger-soft); color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 35%, transparent); }
.stock-pill--sin_base { background: var(--color-canvas-soft); color: var(--color-text-subtle); border-color: var(--color-border); }

.inventory-stock-detail { display: grid; gap: var(--space-3); }
/* El detalle es un acordeon dentro de la fila: ocupa todo el ancho del
   articulo y se separa con una linea, sin tarjeta propia ni sombra. */
.inventory-stock-row__panel { grid-column: 1 / -1; padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.inventory-stock-detail__title { margin: 0; font-size: var(--font-size-body-strong); }
.inventory-stock-detail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.inventory-stock-detail__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-3); }
.inventory-stock-detail__fact { display: grid; gap: 2px; }
.inventory-stock-detail__fact dt { font-size: var(--font-size-caption); color: var(--color-text-subtle); }
.inventory-stock-detail__fact dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: var(--font-weight-medium); }
.inventory-stock-kardex { display: grid; gap: var(--space-1); }
.inventory-stock-kardex__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--space-3); padding: 6px var(--space-3); border-radius: var(--radius-sm); background: var(--color-canvas-soft); font-size: var(--font-size-small); }
.inventory-stock-kardex__row span { font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .inventory-stock-row { grid-template-columns: minmax(0, 1fr); }
  .inventory-stock-row__detail { grid-template-columns: minmax(0, 1fr) auto; }
  .inventory-stock-row__pills { grid-column: 1 / -1; justify-content: flex-start; }
  .inventory-stock-row__actions { justify-content: flex-start; }
  .inventory-stock-kardex__row { grid-template-columns: 1fr auto; }
}

/* Recetas POS · Mis recetas (C-8a). */
.inventory-recipes { display: grid; gap: var(--space-4); max-width: 980px; }
.inventory-recipes__heading { display: grid; gap: 3px; }
.inventory-recipes__heading h3, .inventory-recipes__heading p { margin: 0; }
.inventory-recipes-tabs { display: flex; gap: var(--space-4); border-bottom: 1px solid var(--color-border); }
.inventory-recipes-tab { min-height: var(--control-height); padding: 0 var(--space-1); border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--color-text-muted); font: inherit; font-weight: var(--font-weight-semibold); cursor: pointer; }
.inventory-recipes-tab:hover { color: var(--color-text); }
.inventory-recipes-tab.is-active { border-bottom-color: var(--color-action); color: var(--color-text); }
.inventory-recipes-tab:focus-visible { border-radius: var(--radius-sm); outline: 2px solid var(--color-focus); outline-offset: 3px; }
.inventory-recipes-panel { min-width: 0; }
.inventory-recipes-panel[hidden] { display: none; }
.inventory-recipe-progress { margin-bottom: var(--space-4); }
.inventory-recipe-progress__line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); color: var(--color-text); font-size: var(--font-size-body-strong); }
.inventory-recipe-progress__percent { color: var(--color-action); font-weight: var(--font-weight-bold); }
.inventory-recipe-progress__track { height: 10px; margin: 10px 0 7px; overflow: hidden; border-radius: 999px; background: var(--color-surface-hover); }
.inventory-recipe-progress__fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--color-action); transition: width 180ms ease; }
.inventory-recipe-progress p { margin: 0; color: var(--color-text-subtle); font-size: var(--font-size-caption); }
.inventory-recipe-search { position: relative; display: block; margin: 0 0 var(--space-3); }
.inventory-recipe-search > span { position: absolute; top: 50%; left: 12px; z-index: 1; color: var(--color-text-subtle); transform: translateY(-50%); }
.inventory-recipe-search input { width: 100%; min-height: var(--control-height); padding: 0 var(--space-3) 0 38px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-canvas-soft); color: var(--color-text); font: inherit; }
.inventory-recipe-search input:focus-visible, .inventory-recipe-more-categories:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.inventory-recipe-filters { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); flex-wrap: wrap; }
.inventory-recipe-category-chips { display: flex; gap: var(--space-2); flex: 1 1 auto; flex-wrap: wrap; }
.inventory-recipe-category-chip { padding: 0 13px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface-raised); color: var(--color-text-muted); font: inherit; font-size: var(--font-size-caption-strong); font-weight: var(--font-weight-semibold); cursor: pointer; }
.inventory-recipe-category-chip:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.inventory-recipe-category-chip.is-active { border-color: var(--color-action); background: color-mix(in srgb, var(--color-action) 10%, transparent); color: var(--color-action); }
.inventory-recipe-more-categories { min-height: 32px; max-width: 190px; padding: 0 32px 0 11px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface-raised); color: var(--color-text-muted); font: inherit; font-size: var(--font-size-caption-strong); }
.inventory-recipe-missing-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 auto; color: var(--color-text-muted); font-size: var(--font-size-caption-strong); font-weight: var(--font-weight-semibold); cursor: pointer; white-space: nowrap; }
.inventory-recipe-missing-toggle input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.inventory-recipe-missing-toggle > span { position: relative; width: 40px; height: 22px; border: 1px solid var(--color-border-strong); border-radius: 999px; background: var(--color-surface-hover); transition: 150ms ease; }
.inventory-recipe-missing-toggle > span::after { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-text-subtle); content: ""; transition: 150ms ease; }
.inventory-recipe-missing-toggle input:checked + span { border-color: var(--color-action); background: color-mix(in srgb, var(--color-action) 12%, transparent); }
.inventory-recipe-missing-toggle input:checked + span::after { left: 20px; background: var(--color-action); }
.inventory-recipe-missing-toggle input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.inventory-recipe-filter-count { min-height: 20px; margin: 0 0 var(--space-2); color: var(--color-text-subtle); font-size: var(--font-size-caption); }
.inventory-recipe-menu-list { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); }
.inventory-recipe-menu-row { border-bottom: 1px solid var(--color-border); }
.inventory-recipe-menu-row:last-child { border-bottom: 0; }
.inventory-recipe-menu-row.is-open { background: color-mix(in srgb, var(--color-action) 7%, var(--color-surface)); }
.inventory-recipe-menu-row__main { display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding: 10px var(--space-3); flex-wrap: nowrap; }
.inventory-recipe-menu-row__name, .inventory-recipe-menu-row__category { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-recipe-menu-row__name { flex: 1 1 220px; min-width: 0; color: var(--color-text); font-size: var(--font-size-small); }
.inventory-recipe-menu-row__category { flex: 0 1 140px; min-width: 72px; color: var(--color-text-subtle); font-size: var(--font-size-caption); }
.inventory-recipe-menu-row__sold { flex: 0 0 auto; color: var(--color-text-subtle); font-size: var(--font-size-caption); text-align: right; white-space: nowrap; }
.inventory-recipe-menu-row__sold strong { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.inventory-recipe-menu-row__state { display: inline-flex; flex: 0 0 96px; align-items: center; justify-content: center; box-sizing: border-box; min-height: 28px; padding: 3px 9px; border: 1px solid transparent; border-radius: 999px; font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.inventory-recipe-menu-row__state.is-ready { border-color: color-mix(in srgb, var(--color-success) 35%, transparent); background: var(--color-success-soft); color: var(--color-success); }
.inventory-recipe-menu-row__state.is-missing { border-color: color-mix(in srgb, var(--color-danger) 35%, transparent); background: var(--color-danger-soft); color: var(--color-danger); }
.inventory-recipe-auto-pull { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; color: var(--color-text-subtle); font-size: var(--font-size-caption); white-space: nowrap; cursor: pointer; }
.inventory-recipe-auto-pull input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.inventory-recipe-auto-pull__track { position: relative; box-sizing: border-box; width: 36px; height: 20px; border: 1px solid var(--color-border-strong); border-radius: 999px; background: var(--color-surface-hover); transition: background 150ms ease, border-color 150ms ease; }
.inventory-recipe-auto-pull__track::after { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 22%); content: ""; transition: transform 150ms ease; }
.inventory-recipe-auto-pull input:checked + .inventory-recipe-auto-pull__track { border-color: var(--color-action); background: var(--color-action); }
.inventory-recipe-auto-pull input:checked + .inventory-recipe-auto-pull__track::after { transform: translateX(16px); }
.inventory-recipe-auto-pull input:focus-visible + .inventory-recipe-auto-pull__track { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.inventory-recipe-menu-row__auto-pull-slot { flex: 0 0 138px; }
.inventory-recipe-menu-row__actions { display: inline-flex; flex: 0 0 134px; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.inventory-recipe-menu-row__action { flex: 0 0 auto; min-height: 32px; height: 32px; padding: 0 10px; white-space: nowrap; }
.inventory-recipe-menu-row__action--icon { width: 32px; padding: 0; font-size: 18px; line-height: 1; }
.inventory-recipe-menu-row.is-open .inventory-recipe-menu-row__main { background: color-mix(in srgb, var(--color-action) 5%, transparent); }
.inventory-recipe-inline-editor { display: grid; gap: var(--space-3); padding: var(--space-3); border-top: 1px dashed var(--color-border-strong); background: var(--color-canvas-soft); }
.inventory-recipe-editor-screen { max-width: 860px; }
.inventory-recipe-editor-screen__header { display: flex; align-items: flex-start; gap: var(--space-3); }
.inventory-recipe-editor-screen__header .icon-btn { flex: 0 0 44px; min-height: 44px; }
.inventory-recipe-editor-screen__header h4 { margin: 0; }
.inventory-recipe-editor-screen__header p { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--font-size-small); }
.inventory-recipe-inline-editor h4 { margin: 0; color: var(--color-text); font-size: var(--font-size-small); }
.inventory-recipe-inline-lines { display: grid; gap: var(--space-2); }
.inventory-recipe-inline-line { display: grid; grid-template-columns: minmax(230px, 1fr) 110px 54px 34px; gap: var(--space-2); align-items: center; min-width: 480px; }
.inventory-recipe-inline-line select, .inventory-recipe-inline-line input, .inventory-recipe-inline-advanced select, .inventory-recipe-inline-advanced input { width: 100%; min-height: 36px; padding: 0 10px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-surface-raised); color: var(--color-text); font: inherit; }
.inventory-recipe-line-quantity { text-align: right; font-variant-numeric: tabular-nums; }
.inventory-recipe-line-unit { overflow: hidden; color: var(--color-text-subtle); font-size: var(--font-size-caption); text-overflow: ellipsis; white-space: nowrap; }
.inventory-recipe-line-remove { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-subtle); font-size: 19px; cursor: pointer; }
.inventory-recipe-line-remove:hover { background: var(--color-danger-soft); color: var(--color-danger); }
.inventory-recipe-inline-add { justify-self: start; padding: 4px 0; border: 0; background: transparent; color: var(--color-info); font: inherit; font-size: var(--font-size-caption-strong); font-weight: var(--font-weight-semibold); cursor: pointer; }
.inventory-recipe-inline-area { display: grid; gap: 4px; max-width: 320px; margin: 0; color: var(--color-text-muted); font-size: var(--font-size-caption); }
.inventory-recipe-inline-area select { width: 100%; min-height: 36px; padding: 0 10px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-surface-raised); color: var(--color-text); font: inherit; }
.inventory-recipe-inline-footer { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.inventory-recipe-effective-from { display: grid; gap: 4px; min-width: 220px; color: var(--color-text-muted); font-size: var(--font-size-caption); }
.inventory-recipe-effective-from input { min-height: 36px; padding: 0 10px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-surface-raised); color: var(--color-text); font: inherit; }
.inventory-recipe-effective-from span { color: var(--color-text-subtle); font-size: var(--font-size-caption); }
.inventory-recipe-inline-footer > span { color: var(--color-text-subtle); font-size: var(--font-size-caption); }
.inventory-recipe-inline-advanced { margin-left: auto; }
.inventory-recipe-inline-advanced > summary { cursor: pointer; color: var(--color-info); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); }
.inventory-recipe-inline-advanced > summary:focus-visible { border-radius: var(--radius-sm); outline: 2px solid var(--color-focus); outline-offset: 3px; }
.inventory-recipe-inline-advanced__body { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(170px, .8fr) minmax(210px, 1fr) auto; gap: var(--space-2); align-items: end; margin-top: var(--space-3); padding: var(--space-3); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-control); }
.inventory-recipe-inline-advanced__body label { display: grid; gap: 4px; margin: 0; color: var(--color-text-muted); font-size: var(--font-size-caption); }
.inventory-recipe-inline-editor > .inventory-status { margin: 0; }
.inventory-recipe-show-all { width: 100%; min-height: var(--control-height); margin-top: var(--space-2); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-control); background: transparent; color: var(--color-info); font: inherit; font-weight: var(--font-weight-semibold); cursor: pointer; }
.inventory-recipe-show-all:hover { background: var(--color-surface-hover); }
.inventory-recipe-toast { position: fixed; bottom: 24px; left: 50%; z-index: var(--z-toast); max-width: min(520px, calc(100vw - 32px)); padding: 11px 16px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-surface-raised); color: var(--color-text); box-shadow: 0 12px 32px rgba(0, 0, 0, .45); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); opacity: 0; transform: translate(-50%, 16px); transition: opacity 180ms ease, transform 180ms ease; }
.inventory-recipe-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.inventory-recipes-advanced-note { margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-small); }
@media (max-width: 860px) {
  .inventory-recipe-menu-list { overflow-x: auto; }
  .inventory-recipe-inline-advanced { width: 100%; margin-left: 0; }
  .inventory-recipe-inline-advanced__body { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .inventory-recipe-filters { align-items: flex-start; }
  .inventory-recipe-missing-toggle { width: 100%; margin-left: 0; }
  .inventory-recipe-inline-lines { overflow-x: auto; }
  .inventory-recipe-menu-list { overflow: hidden; }
  .inventory-recipe-menu-row__main { align-items: center; flex-wrap: wrap; }
  .inventory-recipe-menu-row__name { flex-basis: 100%; }
  .inventory-recipe-menu-row__category { flex: 1 1 96px; }
  .inventory-recipe-inline-advanced__body { grid-template-columns: 1fr; }
  .inventory-recipe-inline-footer { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .inventory-recipe-progress__fill, .inventory-recipe-toast, .inventory-recipe-missing-toggle > span, .inventory-recipe-missing-toggle > span::after, .inventory-recipe-auto-pull__track, .inventory-recipe-auto-pull__track::after { transition: none; }
}

/* UI-4a: captura PWA-first. La identidad y el control quedan juntos sin convertir el target táctil en un botón ancho. */
.inventory-operation-area-summary { display: flex; align-items: center; gap: var(--space-2); min-width: 0; min-height: 44px; }
.inventory-operation-area-summary__label { color: var(--color-text-muted); font-size: var(--font-size-small); }
.inventory-operation-area-summary-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-operation-change-area { width: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); font: inherit; cursor: pointer; }
.inventory-operation-details { border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); }
.inventory-operation-details > summary { min-height: 44px; display: flex; align-items: center; padding: 0 var(--space-3); cursor: pointer; font-weight: var(--font-weight-semibold); }
.inventory-operation-details__content { display: grid; gap: var(--space-2); padding: 0 var(--space-3) var(--space-3); }
.inventory-operation-form .ui-product-row { min-height: 72px; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); padding: var(--space-2) var(--space-3); }
.inventory-operation-form .ui-product-row__identity { min-width: 0; }
.inventory-operation-form .ui-product-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-operation-form .ui-product-row .ui-meta { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-operation-form .ui-product-row__controls { display: grid; justify-items: end; gap: 2px; }
.inventory-operation-form .ui-product-row__controls .ui-stepper { width: 132px; min-height: 44px; grid-template-columns: 44px 44px 44px; }
.inventory-operation-form .ui-product-row__controls--count { grid-template-columns: auto auto; align-items: center; }
.inventory-operation-form .ui-product-row__state select { width: 118px; min-height: 44px; }
.inventory-operation-form .ui-product-row__reason { grid-column: 1 / -1; width: 100%; }
.category-chips, .inventory-filter-chips, .inventory-recipe-category-chips { position: relative; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.category-chips > *, .inventory-filter-chips > *, .inventory-recipe-category-chips > * { flex: 0 0 auto; }
.inventory-chip-scroll::after, .category-chips::after, .inventory-filter-chips::after, .inventory-recipe-category-chips::after { content: ''; position: sticky; right: 0; width: 18px; flex: 0 0 18px; margin-left: auto; pointer-events: none; background: linear-gradient(90deg, transparent, var(--color-surface)); box-shadow: -8px 0 10px color-mix(in srgb, var(--color-surface) 55%, transparent); }
.inventory-chip-scroll::after { content: ''; }
@media (max-width: 768px) {
  .inventory-operation-form .ui-product-row { min-height: 64px; grid-template-columns: minmax(0, 1fr) auto; padding: 6px var(--space-2); }
  .inventory-operation-form .ui-product-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .inventory-operation-form .ui-stepper { min-height: 44px; }
  .inventory-operation-form .ui-product-row__controls--count { grid-template-columns: 118px; }
  .inventory-operation-form .ui-product-row__controls--count .ui-stepper { grid-column: 1; }
  .inventory-operation-form .ui-product-row__reason { grid-column: 1; }
  .doc-header { gap: var(--space-2); padding: var(--space-2); }
  .inventory-operation-details__content { padding: 0 var(--space-2) var(--space-2); }
}@media (max-width: 768px) {
  .inventory-operation-form .capture-row { min-height: 64px; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); padding: 6px var(--space-2); align-items: center; }
  .inventory-operation-form .capture-row__identity { min-width: 0; }
  .inventory-operation-form .capture-row__identity h4, .inventory-operation-form .capture-row__identity p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .inventory-operation-form .capture-row__identity p { margin-top: 2px; }
  .inventory-operation-form .capture-row__stock { display: none; }
  .inventory-operation-form .capture-row__quantity { grid-column: 2; grid-row: 1; grid-template-columns: 72px auto; min-width: 112px; }
  .inventory-operation-form .capture-row__quantity input { min-height: 44px; }
}
/* UI-4b: compact recipe rows without viewport overflow. */
.inventory-recipe-menu-row__identity { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: var(--space-3); }
.inventory-recipe-menu-row__controls { display: inline-flex; flex: 0 0 auto; min-width: 0; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.inventory-recipe-menu-row__controls .inventory-recipe-menu-row__actions { flex-basis: auto; }
@media (max-width: 768px) {
  .inventory-recipe-menu-row__main { min-height: 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); padding: 6px var(--space-2); flex-wrap: nowrap; }
  .inventory-recipe-menu-row__identity { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .inventory-recipe-menu-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .inventory-recipe-menu-row__category { display: none; }
  .inventory-recipe-menu-row__sold { min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
  .inventory-recipe-menu-row__controls { gap: 4px; }
  .inventory-recipe-menu-row__state { flex-basis: auto; min-width: 48px; min-height: 28px; padding-inline: 7px; }
  .inventory-recipe-menu-row__auto-pull-slot { flex-basis: auto; }
  .inventory-recipe-auto-pull { gap: 0; min-height: 44px; }
  .inventory-recipe-auto-pull__label { display: none; }
  .inventory-recipe-menu-row__actions { gap: 4px; }
  .inventory-recipe-menu-row__auto-pull-slot, .inventory-recipe-menu-row__primary-action-slot, .inventory-recipe-menu-row__activation-slot { display: contents; }
  .inventory-recipe-menu-row__action-placeholder { display: none; }
  .inventory-recipe-menu-row__action { min-width: 44px; min-height: 44px; height: 44px; padding-inline: 8px; }
  .inventory-recipe-menu-row__action--icon { width: 44px; padding: 0; }
  .inventory-stock-row__detail, .inventory-stock-row__main { min-width: 0; }
  .inventory-stock-row__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* UI-4c: columnas estables de escritorio; móvil conserva el diseño compacto. */
@media (min-width: 769px) {
  .inventory-recipe-menu-row__main { display: grid; grid-template-columns: minmax(0, 1fr) 140px 110px 90px 278px; gap: var(--space-3); }
  .inventory-recipe-menu-row__identity, .inventory-recipe-menu-row__controls { display: contents; }
  .inventory-recipe-menu-row__name { min-width: 0; }
  .inventory-recipe-menu-row__category { min-width: 0; color: var(--color-text-subtle); }
  .inventory-recipe-menu-row__sold { font-variant-numeric: tabular-nums; text-align: right; }
  .inventory-recipe-menu-row__state { width: 90px; }
  .inventory-recipe-menu-row__actions { width: 278px; display: grid; grid-template-columns: 108px minmax(118px, 1fr) 36px; align-items: center; gap: var(--space-2); }
  .inventory-recipe-menu-row__auto-pull-slot, .inventory-recipe-menu-row__primary-action-slot, .inventory-recipe-menu-row__activation-slot { min-width: 0; }
  .inventory-recipe-menu-row__action { width: 100%; }
  .inventory-recipe-menu-row__action-placeholder { display: inline-block; visibility: hidden; }


  .inventory-stock-row__detail { grid-template-columns: minmax(0, 1fr) 140px 190px; }
  .inventory-stock-row__qty { font-variant-numeric: tabular-nums; text-align: right; }
  .inventory-stock-row__pills { width: 190px; flex-wrap: nowrap; }
}

/* Auditoria: densidad deliberada para seleccionar sin perder contexto. */
.inventory-admin-header > p { display: none; }
.inventory-history-toolbar { align-items: center; }
.inventory-history-toolbar h3 { margin: 0; }
.inventory-history-list { display: grid; gap: var(--space-5); }
.inventory-history-day { display: grid; gap: var(--space-2); }
.inventory-history-day > h4 { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); }
.inventory-history-day__events { display: grid; gap: 2px; }
.inventory-history-event { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); align-items: baseline; padding: var(--space-2) 0; }
.inventory-history-event strong { font-size: var(--font-size-small); }
.inventory-history-event span, .inventory-history-event time { color: var(--color-text-muted); font-size: var(--font-size-caption); }
.inventory-history-event time { font-variant-numeric: tabular-nums; }

.inventory-reset-workspace { gap: var(--space-4); }
.inventory-reset-heading { gap: 0; }
.inventory-reset-heading h3 { font-size: var(--font-size-title); }
.inventory-reset-form { gap: var(--space-3); }
.inventory-reset-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); align-items: end; }
.inventory-reset-area-picker { min-width: 0; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-canvas-soft); }
.inventory-reset-area-picker summary { min-height: var(--control-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-3); cursor: pointer; color: var(--color-text); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); }
.inventory-reset-area-picker summary span { overflow: hidden; color: var(--color-text-muted); font-size: var(--font-size-caption); font-weight: var(--font-weight-regular); text-overflow: ellipsis; white-space: nowrap; }
.inventory-reset-area-picker[open] summary { border-bottom: 1px solid var(--color-border); }
.inventory-reset-areas { display: grid; gap: var(--space-1); padding: var(--space-2); }
.inventory-reset-areas label { min-height: 36px; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2); border-radius: var(--radius-sm); color: var(--color-text); font-size: var(--font-size-small); cursor: pointer; }
.inventory-reset-areas label:hover { background: var(--color-surface-hover); }
.inventory-reset-products { display: grid; gap: 2px; max-height: 360px; overflow: auto; }
.inventory-reset-product-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-2); align-items: center; min-height: 44px; padding: 0 var(--space-2); border-radius: var(--radius-sm); }
.inventory-reset-product-row:focus-within { background: color-mix(in srgb, var(--color-action) 7%, transparent); outline: 1px solid color-mix(in srgb, var(--color-action) 55%, transparent); }
.inventory-reset-product-name { min-width: 0; overflow: hidden; color: var(--color-text); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
.inventory-reset-product-meta { color: var(--color-text-muted); font-size: var(--font-size-caption); font-variant-numeric: tabular-nums; white-space: nowrap; }
.inventory-reset-quantity { width: 62px; min-height: var(--control-height-dense); padding: 0 var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-canvas-soft); color: var(--color-text); font: inherit; font-size: var(--font-size-small); text-align: center; }
.inventory-reset-preview-summary, .inventory-reset-confirmation, .inventory-reset-result { padding: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-panel); background: var(--color-canvas-soft); }
.inventory-reset-preview-summary h4, .inventory-reset-result h4, .inventory-reset-confirmation h4 { margin: 0 0 var(--space-1); font-size: var(--font-size-small); }
.inventory-reset-preview-lines, .inventory-reset-result-lines { display: grid; gap: 2px; padding: 0; margin: var(--space-2) 0 0; list-style: none; }
.inventory-reset-preview-lines li, .inventory-reset-result-lines li { display: flex; justify-content: space-between; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-caption); }
.inventory-reset-confirmation-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); }
.inventory-reset-result { border-color: var(--color-success); background: var(--color-success-soft); }
.inventory-reset-result p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-small); }
.inventory-reset-result a { color: var(--color-text); font-weight: var(--font-weight-semibold); }

@media (max-width: 560px) {
  .inventory-reset-filters, .inventory-reset-confirmation-fields { grid-template-columns: 1fr; }
  .inventory-reset-products { max-height: none; }
}

/* ============================================================
   INVENTARIO Y ADMINISTRACIÓN — migrado desde dashboard.html
   (TASK-011, 2026-08-06). Fuente única de verdad (regla 0).
   ============================================================ */
/* Inventario: hoja operativa de conteo, diseñada para una mano en móvil. */
  .inventory-page { align-content: start; }
  .inventory-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-1) 2px;
  }
  .inventory-hero h2 { margin: 0; font-size: var(--font-size-title); letter-spacing: 0; }
  .inventory-hero p { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--font-size-small); }
  .inventory-progress {
    min-width: 70px;
    padding: 7px var(--space-2);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-action) 8%, transparent);
    color: var(--color-action);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-semibold);
    text-align: center;
  }
  .inventory-card { padding: var(--space-4); }
  .inventory-card h3 { margin: 0; font-size: var(--font-size-control); letter-spacing: 0; }
  .inventory-card > p { margin: 6px 0 0; color: var(--color-text-muted); font-size: var(--font-size-small); line-height: 1.45; }
  .inventory-operation-hub { max-width: 760px; }
  .inventory-operation-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
  .inventory-operation-heading h2 { margin: 0; font-size: var(--font-size-title); letter-spacing: 0; }
  .inventory-operation-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
  /* Excepción documentada: tarjeta de entrada al flujo, no botón denso. */
  .inventory-operation-action { min-height: 96px; display: grid; align-content: space-between; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border-strong); border-top: 3px solid var(--color-action); border-radius: var(--radius-control); background: var(--color-surface-raised); color: var(--color-text); text-align: left; transition: transform 150ms ease, background 150ms ease, border-color 150ms ease; }
  .inventory-operation-action:nth-child(2) { border-top-color: var(--color-success); }
  .inventory-operation-action:nth-child(3) { border-top-color: var(--color-info); }
  .inventory-operation-action:nth-child(4) { border-top-color: var(--color-danger); }
  .inventory-operation-action:hover:not(:disabled) { background: var(--color-canvas-soft); border-color: var(--color-text); }
  .inventory-operation-action:active:not(:disabled) { transform: scale(0.98); }
  .inventory-operation-action strong { font-size: var(--font-size-small); line-height: 1.2; letter-spacing: 0; }
  .inventory-operation-mark { color: var(--color-text-muted); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
  .inventory-operation-action[hidden] { display: none; }
  .inventory-operation-review { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
  .inventory-operation-review-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .inventory-operation-review-head h3 { font-size: var(--font-size-small); }
  .inventory-operation-review-count { display: inline-grid; min-width: 24px; height: 24px; place-items: center; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--color-action) 8%, transparent); color: var(--color-action); font-size: var(--font-size-caption); font-variant-numeric: tabular-nums; vertical-align: middle; }
  .inventory-operation-flow-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .inventory-operation-flow-head h3 { font-size: var(--font-size-body-strong); }
  .inventory-operation-count-row { display: grid; grid-template-columns: minmax(0, 1fr) 108px; gap: var(--space-2); align-items: end; }
  .inventory-operation-count-row label { margin: 0; }
  .inventory-operation-count-state { color: var(--color-text-muted); font-size: var(--font-size-caption); }
  .inventory-operation-empty { padding: 18px var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-small); text-align: center; }
  .inventory-auth-form, .inventory-toolbar { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
  .inventory-auth-form input, .inventory-toolbar select, .inventory-count-input {
    width: 100%; min-height: 48px; padding: 0 var(--space-3);
    border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
    background: var(--color-canvas-soft); color: var(--color-text);
  }
  .inventory-primary-btn {
    min-height: var(--control-height); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-md);
    background: var(--color-action); color: var(--color-action-ink); font-weight: var(--font-weight-semibold);
  }
  .inventory-secondary-btn {
    min-height: var(--control-height); padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
    background: transparent; color: var(--color-text); font-weight: var(--font-weight-semibold);
  }
  .inventory-toolbar { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .inventory-toolbar label { display: grid; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); }
  .inventory-status { min-height: 20px; margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-small); }
  .inventory-operation-announcement { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .inventory-status.error { color: var(--color-danger); }
  .inventory-status.ok { color: var(--color-success); }
  .inventory-admin-surface { display: grid; gap: var(--space-4); }
  .inventory-admin-header { display: grid; gap: var(--space-3); padding: var(--space-1) var(--space-1) 0; }
  .inventory-admin-header h2, .inventory-admin-header p { margin: 0; }
  .inventory-admin-header h2 { font-size: var(--font-size-title); }
  .inventory-admin-header p { max-width: 68ch; color: var(--color-text-muted); font-size: var(--font-size-small); line-height: 1.5; }
  .inventory-admin-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .inventory-admin-tab { min-height: var(--control-height); padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: transparent; color: var(--color-text-muted); font-weight: var(--font-weight-semibold); }
  .inventory-admin-tab:hover:not(:disabled) { border-color: var(--color-text-muted); color: var(--color-text); }
  .inventory-admin-tab[aria-selected="true"] { border-color: var(--color-action); background: color-mix(in srgb, var(--color-action) 10%, transparent); color: var(--color-text); }
  .inventory-admin-view[hidden] { display: none; }
  .inventory-reset-workspace { display: grid; gap: 18px; border-color: var(--color-border-strong); }
  .inventory-reset-heading { display: grid; gap: 5px; }
  .inventory-reset-heading h3, .inventory-reset-heading p { margin: 0; }
  .inventory-reset-heading p { color: var(--color-text-muted); font-size: var(--font-size-small); line-height: 1.5; }
  .inventory-reset-mode-tabs { margin-top: var(--space-2); }
  .inventory-reset-mode-tabs [data-reset-mode="purge_all"][aria-selected="true"] { border-color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 10%, transparent); color: var(--color-danger); }
  .inventory-reset-purge-notice { padding: var(--space-3); border-left: 3px solid var(--color-danger); background: var(--color-danger-soft); color: var(--color-text-muted); font-size: var(--font-size-small); line-height: 1.5; }
  .inventory-reset-purge-notice strong { color: var(--color-danger); }
  .inventory-reset-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); padding: 0; margin: 0; list-style: none; }
  .inventory-reset-rail li { min-height: var(--control-height); display: grid; place-items: center; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-canvas-soft); color: var(--color-text-muted); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); text-align: center; }
  .inventory-reset-rail li[data-state="active"] { border-color: var(--color-action); color: var(--color-text); box-shadow: inset 0 3px 0 var(--color-action); }
  .inventory-reset-rail li[data-state="complete"] { border-color: var(--color-success); color: var(--color-text); box-shadow: inset 0 3px 0 var(--color-success); }
  .inventory-reset-rail li[data-state="ready"] { border-color: var(--color-border-strong); color: var(--color-text); }
  .inventory-reset-form { display: grid; gap: var(--space-4); }
  .inventory-reset-form fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
  .inventory-reset-form legend { margin-bottom: var(--space-2); color: var(--color-text); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); }
  .inventory-reset-frame { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .inventory-reset-mode-card { position: relative; min-height: 112px; display: grid; align-content: start; gap: var(--space-1); padding: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface-raised); cursor: pointer; }
  .inventory-reset-mode-card:has(input:checked) { background: color-mix(in srgb, var(--color-action) 8%, var(--color-surface-raised)); border-color: var(--color-action); }
  .inventory-reset-mode-card--danger { border-color: color-mix(in srgb, var(--color-danger) 55%, var(--color-border-strong)); }
  .inventory-reset-mode-card--danger:has(input:checked) { background: var(--color-danger-soft); border-color: var(--color-danger); }
  .inventory-reset-mode-card input { position: absolute; top: var(--space-3); right: var(--space-3); }
  .inventory-reset-mode-card strong { padding-right: 28px; font-size: var(--font-size-small); }
  .inventory-reset-mode-card span { color: var(--color-text-muted); font-size: var(--font-size-caption); line-height: 1.45; }
  .inventory-reset-scope { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .inventory-reset-scope label { min-height: var(--control-height); display: flex; align-items: center; justify-content: center; gap: 7px; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-muted); cursor: pointer; }
  .inventory-reset-scope label:has(input:checked) { border-color: var(--color-action); background: color-mix(in srgb, var(--color-action) 8%, transparent); color: var(--color-text); }
  .inventory-reset-field { display: grid; gap: 7px; color: var(--color-text-muted); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); }
  .inventory-reset-field select, .inventory-reset-field textarea, .inventory-reset-field input:not([type="checkbox"]):not([type="radio"]) { width: 100%; min-height: var(--control-height); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-canvas-soft); color: var(--color-text); }
  .inventory-reset-field textarea { min-height: 88px; resize: vertical; }
  .inventory-reset-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
  .inventory-reset-areas label { min-height: var(--control-height); display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 11px; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); cursor: pointer; }
  .inventory-reset-preview-summary { padding: var(--space-3); border: 1px solid var(--color-action); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-action) 8%, transparent); }
  .inventory-reset-preview-summary h4, .inventory-reset-preview-summary p { margin: 0; }
  .inventory-reset-preview-summary ul { display: grid; gap: var(--space-1); padding: 0; margin: var(--space-2) 0; list-style: none; }
  .inventory-reset-preview-summary li { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-small); }
  .inventory-reset-preview-summary strong, .inventory-reset-preview-summary time { color: var(--color-text); font-variant-numeric: tabular-nums; }
  .inventory-reset-confirmation { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-action); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-action) 7%, transparent); }
  .inventory-reset-confirmation h4, .inventory-reset-confirmation p { margin: 0; }
  .inventory-reset-confirmation code { color: var(--color-action); font-weight: var(--font-weight-semibold); }
  .inventory-reset-execute { background: var(--color-action); color: var(--color-action-ink); }
  .inventory-reset-confirmation[data-reset-tone="danger"] { border-color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 7%, transparent); }
  .inventory-reset-confirmation[data-reset-tone="danger"] code { color: var(--color-danger); }
  .inventory-reset-confirmation[data-reset-tone="danger"] .inventory-reset-execute { background: var(--color-danger); }
  .inventory-reset-control:focus-visible { outline: 2px solid var(--color-action); outline-offset: 2px; }
  .inventory-reset-control:disabled { cursor: wait; opacity: .58; }
  .inventory-reset-empty { grid-column: 1 / -1; margin: 0; color: var(--color-text-muted); font-size: var(--font-size-small); }
  @media (max-width: 759px) {
    .inventory-admin-tabs { display: grid; grid-template-columns: 1fr; }
    .inventory-reset-frame { grid-template-columns: 1fr; }
    .inventory-reset-rail { grid-template-columns: 1fr; }
    .inventory-reset-scope { grid-template-columns: 1fr; }
}
  @media (prefers-reduced-motion: reduce) {
    .inventory-reset-control { transition: none; }
}
  .inventory-review-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
  .inventory-operation-form { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
  .inventory-operation-form label { display: grid; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); }
  .inventory-operation-form[hidden], .inventory-operation-form label[hidden] { display: none; }
  .inventory-operation-form input:not([type="checkbox"]), .inventory-operation-form select, .inventory-operation-form textarea { min-height: var(--control-height); width: 100%; padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-canvas-soft); color: var(--color-text); }
  .inventory-operation-form textarea { min-height: 72px; padding-top: var(--space-2); resize: vertical; }
  .inventory-operation-grid { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr); }
  .inventory-list { display: grid; gap: 9px; margin-top: var(--space-3); }
  .inventory-row { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-raised); }
  .inventory-row-head { display: flex; align-items: start; justify-content: space-between; gap: var(--space-2); }
  .inventory-item-name { font-size: var(--font-size-body-strong); font-weight: var(--font-weight-semibold); }
  .inventory-theoretical { color: var(--color-text-muted); font-size: var(--font-size-caption); text-align: right; white-space: nowrap; }
  .inventory-entry-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; margin-top: var(--space-3); }
  /* .inventory-operation-form label (below) stacks a label's children in a
     single grid column, which is right for "Caption\n<input>" fields but
     leaves a lone/list checkbox stranded away from its own text when the
     label has no caption row to sit above — hits both single checkboxes
     (e.g. "Requiere conteo diario") and the role/area checklists in
     Usuarios and Catálogo. Keep checkbox rows as a simple inline pair. */
  .inventory-operation-form label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: var(--space-2); }

  /* Checkbox nativo suelto (ej.: "Requiere conteo diario"): antes heredaba
     el tamaño y borde de .inventory-operation-form input de arriba y se
     veía como un cuadro gris grande sin relación visual con su etiqueta. */
  input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--color-action); cursor: pointer; flex: 0 0 auto; }

  /* Chips: grupos de selección múltiple (roles, áreas). El checkbox real
     queda invisible cubriendo todo el chip; :checked pinta el estado. */
  .chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); margin-top: var(--space-2); }
  .chip-grid label {
    position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: var(--control-height); padding: 0 var(--space-3); border-radius: 999px;
    border: 1px solid var(--color-border-strong); background: var(--color-canvas-soft);
    color: var(--color-text-muted); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); line-height: 1.25;
    cursor: pointer; transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
  }
  .chip-grid label:hover { color: var(--color-text); }
  .chip-grid input[type="checkbox"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .chip-grid label:has(input:checked) { border-color: var(--color-action); background: color-mix(in srgb, var(--color-action) 8%, transparent); color: var(--color-text); }
  .chip-grid label:has(input:focus-visible) { outline: 2px solid var(--color-action); outline-offset: 2px; }
  .chip-grid .chip-empty { grid-column: 1 / -1; color: var(--color-text-muted); font-size: var(--font-size-small); }

  /* Confirmación "guardado en": firma visual reutilizada en cada alta del
     catálogo y de usuarios, responde "¿dónde quedó lo que acabo de crear?" */
  .save-location { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px dashed var(--color-action); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-action) 8%, transparent); color: var(--color-text); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); }
  .save-location[hidden] { display: none; }
  .save-location .pin { flex: 0 0 auto; display: inline-flex; color: var(--color-action); }
  .save-location .path { color: var(--color-text-muted); font-weight: var(--font-weight-semibold); }
  .save-location .path b { color: var(--color-text); font-weight: var(--font-weight-semibold); }

  .inventory-list-group-label { grid-column: 1 / -1; margin: var(--space-2) 0 -2px; font-size: var(--font-size-caption-strong); font-weight: var(--font-weight-semibold); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); }
  .inventory-list-group-label:first-child { margin-top: 0; }
  .inventory-kicker { margin: 0 0 var(--space-1); color: var(--color-action); font-size: var(--font-size-caption-strong); font-weight: var(--font-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; }
  @keyframes row-flash { 0% { background: color-mix(in srgb, var(--color-action) 8%, transparent); border-color: var(--color-action); } 100% { background: var(--color-surface-raised); border-color: var(--color-border); } }
  .inventory-row.is-new { animation: row-flash 2.4s ease-out; }

  /* Compatibilidad con la aserción estática previa a T2.2; la declaración ejecutable está tokenizada. .inventory-count-input { font-size: 17px */
  .inventory-count-input { font-size: var(--font-size-control); font-variant-numeric: tabular-nums; }
  .inventory-reason-label { display: grid; gap: var(--space-1); margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); }
  .inventory-not-counted-reason { min-height: var(--control-height); width: 100%; padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-canvas-soft); color: var(--color-text); }
  .inventory-state-control { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .inventory-state-control button { min-height: var(--control-height); padding: 5px var(--space-1); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-canvas-soft); color: var(--color-text-muted); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); }
  .inventory-state-control button:hover:not(:disabled) { background: var(--color-surface-hover); border-color: var(--color-border-strong); color: var(--color-text); }
  .inventory-state-control button:active:not(:disabled) { transform: translateY(1px); }
  .inventory-state-control button[aria-pressed="true"] { border-color: var(--color-action); background: color-mix(in srgb, var(--color-action) 8%, transparent); color: var(--color-text); }
  .inventory-movement-kind-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); margin: var(--space-2) 0 var(--space-3); }
  .inventory-movement-kind-btn { min-height: var(--control-height); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-canvas-soft); color: var(--color-text-muted); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); }
  .inventory-movement-kind-btn:hover:not(:disabled) { background: var(--color-surface-hover); border-color: var(--color-border-strong); color: var(--color-text); }
  .inventory-movement-kind-btn:active:not(:disabled) { transform: translateY(1px); }
  .inventory-movement-kind-btn[aria-pressed="true"][data-movement-kind="receipt"] { border-color: var(--color-selection); background: color-mix(in srgb, var(--color-selection) 13%, transparent); color: var(--color-text); }
  .inventory-movement-kind-btn[aria-pressed="true"][data-movement-kind="transfer"] { border-color: var(--color-info); background: var(--color-info-soft); color: var(--color-text); }
  .inventory-movement-kind-btn[aria-pressed="true"][data-movement-kind="waste"] { border-color: var(--color-danger); background: var(--color-danger-soft); color: var(--color-text); }
  .inventory-row[data-state="explicit_zero"] .inventory-count-input { opacity: 0.45; }
  .inventory-row[data-state="not_counted"] .inventory-count-input { opacity: 0.32; }
  .inventory-submit { position: sticky; bottom: max(var(--space-2), env(safe-area-inset-bottom)); z-index: var(--z-sticky); margin-top: var(--space-3); box-shadow: 0 10px 24px color-mix(in srgb, var(--color-canvas) 34%, transparent); }
  .inventory-empty { padding: 22px var(--space-2); color: var(--color-text-muted); text-align: center; font-size: var(--font-size-small); }
  .inventory-login-note { color: var(--color-warning) !important; }
  @media (min-width: 760px) {
    .inventory-operation-action-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .inventory-entry-grid { grid-template-columns: minmax(150px, 0.55fr) minmax(300px, 1fr); align-items: center; }
    .inventory-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inventory-operation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inventory-configuration-hub-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

  /* Contrato autofill tema dark (design-system.md §6): Chrome no pinta blanco. */
  input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
    box-shadow: inset 0 0 0 1000px var(--color-canvas-soft);
    -webkit-text-fill-color: var(--color-text);
    caret-color: var(--color-text);
    transition: background-color 9999s ease-out;
  }

/* Mejoras de captura aprobadas (mock v2 TASK-011):
   stock grande tabular + fila resuelta en verde semántico. */
.capture-row__stock strong { font-size: var(--font-size-control); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.capture-row.is-touched .capture-row__quantity input { border-color: var(--color-success); color: var(--color-success); }

/* Recetas · aplicar descarga manual (migrado TASK-011). */
  details.quality-detail, details.inventory-manual-apply { margin-top: var(--space-2); }
  details.inventory-manual-apply summary { min-height: var(--control-height); display: flex; align-items: center; color: var(--color-text-muted); font-size: var(--font-size-caption); cursor: pointer; }
  details.inventory-manual-apply .inventory-operation-form { margin-top: var(--space-2); }

/* TASK-012 · Catálogo (Insumos y las 5 pestañas): filas con divisores sobre
   una sola superficie (ley §5.6; mock design/task-012-insumos-390.html aprobado). */
.inventory-row[data-catalog-item-row],
.inventory-row[data-configuration-row] {
  border: 0; border-radius: 0; background: none; box-shadow: none;
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-1);
}
.inventory-row[data-catalog-item-row]:last-child,
.inventory-row[data-configuration-row]:last-child { border-bottom: 0; }
.inventory-configuration-row-actions button {
  border: 0; border-radius: 0; padding: 0 var(--space-1);
  color: var(--color-text-muted);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.inventory-configuration-row-actions button:hover:not(:disabled) { background: none; color: var(--color-text); }
.inventory-configuration-row-actions .danger { color: var(--color-danger); }
.inventory-catalog-count { margin: 0 0 var(--space-2); font-size: var(--font-size-caption); color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }

/* ===== TASK-019 · Resumen Inventario: tabla operativa compacta ===== */
.stock-alert-chip[data-tone="info"] { background: var(--color-info-soft); border-color: color-mix(in srgb, var(--color-info) 35%, transparent); color: var(--color-info); }
.stock-alert-chip[data-tone="info"]::before { background: var(--color-info); }

.inventory-stock-head { display: flex; align-items: baseline; gap: var(--space-3); margin: 0 2px var(--space-2); }
.inventory-stock-head .ui-section-title { margin: 0; }
.inventory-stock-freshness { margin: 0 0 0 auto; color: var(--color-text-subtle); font-size: 10px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; text-align: right; line-height: 1.4; }
.inventory-stock-freshness b { color: var(--color-text-muted); font-weight: 600; }
.inventory-stock-period-row { align-items: center; gap: var(--space-2); }
.inventory-stock-periods { display: flex; flex-wrap: wrap; gap: 6px; }
.inventory-stock-period {
  min-height: 28px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: 999px;
  background: var(--color-surface-raised); color: var(--color-text-muted); font-size: var(--font-size-caption);
  font-weight: 750; cursor: pointer;
}
.inventory-stock-period:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.inventory-stock-period.is-active { background: var(--color-action-soft); border-color: color-mix(in srgb, var(--color-action) 45%, transparent); color: var(--color-action); }
.inventory-stock-custom-range { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inventory-stock-custom-range[hidden] { display: none; }
.inventory-stock-custom-range label { display: inline-flex; align-items: center; gap: 5px; color: var(--color-text-subtle); font-size: var(--font-size-caption); }
.inventory-stock-custom-range input { width: 128px; min-height: 28px; padding: 0 8px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-canvas-soft); color: var(--color-text); font-size: var(--font-size-caption); }

/* dashboard.html fija `.panel { overflow: hidden }` y ese overflow crea un
   scroll container que ANULA el thead sticky (QA producción 2026-08-08: el
   encabezado no pegaba al bajar). clip recorta igual pero sin crear scroll
   container, así el sticky funciona contra el scroll de la página. */
.panel.inventory-stock { overflow: clip; }

.inventory-stock-tablewrap { border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); overflow-x: clip; container-type: inline-size; }
.inventory-stock-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* Encabezado fijo al bajar: visible mientras se scrollea la tabla. */
.inventory-stock-table thead th { position: sticky; background: var(--color-surface-raised); z-index: 3; }
.inventory-stock-table thead tr:first-child th { top: 0; }
.inventory-stock-table col.c-prod { width: auto; }
.inventory-stock-table col.c-ex { width: 96px; }
.inventory-stock-table col.c-flow { width: 70px; }
.inventory-stock-table col.c-count { width: 86px; }
.inventory-stock-table col.c-diff { width: 88px; }
.inventory-stock-table col.c-state { width: 82px; }
.inventory-stock-table thead th { background: var(--color-surface-raised); color: var(--color-text-subtle); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.inventory-stock-table thead th.num, .inventory-stock-table td.num { text-align: right; }
.inventory-stock-table td { padding: 4px 8px; vertical-align: middle; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inventory-stock-item { border-bottom: 1px solid color-mix(in srgb, var(--color-border) 45%, transparent); }
.inventory-stock-item:hover { background: var(--color-surface-hover); }

.inventory-stock-item__btn { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.inventory-stock-name { font-size: 12.5px; font-weight: 650; color: var(--color-text); }
.inventory-stock-item__btn[aria-expanded="true"] .inventory-stock-name { color: var(--color-action); }
.inventory-stock-badge { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 999px; font-size: 8.5px; font-weight: 800; vertical-align: 1px; }
.inventory-stock-badge--doc { background: var(--color-info-soft); color: var(--color-info); }
.inventory-stock-badge--norecipe { background: var(--color-warning-soft); color: var(--color-warning); }

.inventory-stock-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.inventory-stock-dot--ok { background: var(--color-success); }
.inventory-stock-dot--warn { background: var(--color-warning); }
.inventory-stock-dot--bad { background: var(--color-danger); }
.inventory-stock-dot--off { background: var(--color-text-subtle); }
.inventory-stock-qty { display: inline-grid; grid-template-columns: 5ch 3ch; justify-content: end; align-items: baseline; gap: 3px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text); }
.inventory-stock-qty b { text-align: right; font-weight: 700; }
.inventory-stock-qty small { color: var(--color-text-subtle); font-weight: 500; font-size: 9.5px; text-align: left; }

.inventory-stock-h { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.inventory-stock-h.in { color: var(--color-success); }
.inventory-stock-h.pos { color: var(--color-info); }
.inventory-stock-h.ws { color: var(--color-warning); }
.inventory-stock-flow { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.inventory-stock-state { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; min-height: 22px; padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.inventory-stock-state--ok { background: var(--color-success-soft); color: var(--color-success); }
.inventory-stock-state--bad { background: var(--color-danger-soft); color: var(--color-danger); }
.inventory-stock-state--warn { background: var(--color-warning-soft); color: var(--color-warning); }
.inventory-stock-state--info { background: var(--color-info-soft); color: var(--color-info); }

/* Detalle acotado: conciliación + últimos 3 movimientos + link a Historial */
.inventory-stock-detail-row td { padding: 0; white-space: normal; }
.inventory-stock-detail__box { padding: 8px 10px; background: var(--color-surface-raised); display: grid; gap: 6px; }
.inventory-stock-detail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.inventory-stock-detail__title { margin: 0; font-size: var(--font-size-small); }
.inventory-stock-detail__head .ui-meta { margin: 2px 0 0; }
.inventory-stock-recon { display: grid; gap: 2px; font-size: 11px; color: var(--color-text-muted); }
.inventory-stock-recon__line { display: flex; justify-content: space-between; gap: 10px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 10.5px; }
.inventory-stock-recon__line b { color: var(--color-text); }
.inventory-stock-recon__line.total { border-top: 1px solid color-mix(in srgb, var(--color-border) 45%, transparent); padding-top: 2px; }
.inventory-stock-recon__line .phys { color: var(--color-info); }
.inventory-stock-recon__line.dif b { color: var(--color-danger); font-weight: 700; }
.inventory-stock-hist-link { justify-self: start; color: var(--color-action); font-size: 10.5px; font-weight: 750; text-decoration: none; }
.inventory-stock-hist-link:hover { text-decoration: underline; }

@container (max-width: 560px) {
  /* La tabla densa no cabe en 390px: ancho mínimo + scroll horizontal con
     Producto sticky. La columna meta se elimina con display:none en el col
     Y en las celdas (ocultar solo las celdas desplaza los anchos del
     colgroup con table-layout:fixed y aplasta Exist.). */
  .inventory-stock-table { min-width: 680px; }
  .inventory-stock-table col.c-prod { width: 156px; }
  .inventory-stock-table col.c-ex { width: 76px; }
  .inventory-stock-table col.c-flow { width: 58px; }
  .inventory-stock-table col.c-count { width: 72px; }
  .inventory-stock-table col.c-diff { width: 78px; }
  .inventory-stock-table col.c-state { width: 70px; }
  .inventory-stock-table thead tr:first-child th:first-child, .inventory-stock-table tbody td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--color-surface);
  }
  .inventory-stock-table thead tr:first-child th:first-child { background: var(--color-surface-raised); z-index: 4; }
  .inventory-stock-detail-row td { position: static; }
  .inventory-stock-table td { padding: 4px 5px; font-size: 11px; }
  .inventory-stock-name { font-size: 11.5px; }
  .inventory-stock-qty { grid-template-columns: 4ch 2.5ch; font-size: 11.5px; }
  .inventory-stock-h { font-size: 9px; }
  .inventory-stock-state { min-width: 48px; font-size: 9px; }
}

/* El container no puede estilarse a sí mismo: el scroll horizontal del
   wrapper va por media query (su ancho ≈ viewport). Hasta 900px las columnas
   fijas (~656px) desbordan: ahí manda el scroll horizontal y el thead sticky
   queda inerte (un scroll container lo anula) — se compensa con el Producto
   sticky-left, el encabezado de grupo fijo y el thead repetido por grupo. */
@media (max-width: 900px) {
  .inventory-stock-tablewrap { overflow-x: auto; }
}

@media (max-width: 560px) {
  /* En móvil el encabezado de cada categoría queda fijo al bajar dentro de
     su sección (el thead no puede ser sticky junto al scroll horizontal). */
  .inventory-stock-group__head { position: sticky; top: 0; z-index: 3; background: var(--color-canvas); padding: 4px 2px; }
}

/* TASK-041 · Diferencias: responsive desktop + tarjetas en móvil. */
.inventory-variance-bulk { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.inventory-variance-bulk label { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); }
.inventory-variance-bulk input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-action); }
.inventory-variance-row .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.inventory-variance-bulk .inventory-primary-btn { margin-left: auto; }
.inventory-variance-list { display: block; overflow-x: auto; }
.inventory-variance-table { min-width: 1180px; }
.inventory-variance-header, .inventory-variance-row { display: grid; grid-template-columns: 38px 240px 90px 110px 94px 220px 280px; gap: var(--space-2); align-items: center; }
.inventory-variance-header { min-height: 42px; padding: 0 var(--space-3); border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); background: var(--color-canvas-soft); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); }
.inventory-variance-row { min-height: 68px; padding: 0 var(--space-3); border-bottom: 1px solid var(--color-border); background: var(--color-surface-raised); }
.inventory-variance-row:last-child { border-bottom: 0; }
.inventory-variance-row.is-selected { background: color-mix(in srgb, var(--color-action) 7%, var(--color-surface-raised)); }
.inventory-variance-item { min-width: 0; }
.inventory-variance-item strong, .inventory-variance-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-variance-item strong { font-size: var(--font-size-body); }
.inventory-variance-item span, .inventory-variance-value span { color: var(--color-text-muted); font-size: var(--font-size-caption); }
.inventory-variance-value { display: grid; gap: 2px; }
.inventory-variance-value strong { font-size: var(--font-size-small); font-variant-numeric: tabular-nums; }
.inventory-variance-value--difference strong { color: var(--color-danger); }
.inventory-variance-value--positive strong { color: var(--color-success); }
.inventory-variance-projection { display: grid; gap: 3px; color: var(--color-text-muted); font-size: var(--font-size-caption); }
.inventory-variance-projection strong { color: var(--color-text); font-size: var(--font-size-small); font-variant-numeric: tabular-nums; }
.inventory-variance-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.inventory-variance-actions .inventory-primary-btn,
.inventory-variance-actions .inventory-secondary-btn { white-space: nowrap; padding-inline: var(--space-3); min-height: 36px; font-size: var(--font-size-small); }
@media (max-width: 860px) {
  .inventory-variance-table { min-width: 1020px; }
  .inventory-variance-header, .inventory-variance-row { grid-template-columns: 32px 200px 80px 96px 80px 180px 260px; }
}
@media (max-width: 620px) {
  .inventory-variance-header { display: none; }
  .inventory-variance-list { overflow-x: hidden; margin-inline: 0; border-block: 0; }
  .inventory-variance-table { min-width: auto; display: flex; flex-direction: column; gap: var(--space-3); }
  .inventory-variance-row {
    display: block;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    background: var(--color-surface-raised);
    min-height: auto;
  }
  .inventory-variance-row > label,
  .inventory-variance-row > .inventory-variance-item {
    display: inline-block;
    vertical-align: top;
  }
  .inventory-variance-row > label { width: 30px; }
  .inventory-variance-row > .inventory-variance-item { width: calc(100% - 40px); }
  .inventory-variance-row > .inventory-variance-item strong,
  .inventory-variance-row > .inventory-variance-item span { white-space: normal; overflow: visible; text-overflow: clip; }
  .inventory-variance-row > .inventory-variance-value {
    display: inline-block;
    width: calc(33.333% - var(--space-3));
    margin-top: var(--space-2);
    vertical-align: top;
  }
  .inventory-variance-row > .inventory-variance-projection {
    display: block;
    margin-top: var(--space-2);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-2);
  }
  .inventory-variance-row > .inventory-variance-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
  }
  .inventory-variance-row > .inventory-variance-actions .inventory-primary-btn,
  .inventory-variance-row > .inventory-variance-actions .inventory-secondary-btn {
    width: 100%;
    min-height: var(--control-height);
    font-size: var(--font-size-control);
    padding-inline: var(--space-2);
    white-space: normal;
    text-align: center;
  }
  .inventory-variance-bulk { margin-inline: 0; padding: var(--space-2) 0; border-block: 0; overflow-x: visible; white-space: normal; flex-wrap: wrap; }
  .inventory-variance-bulk button { flex: 1 1 auto; }
}
.inventory-variance-bulk { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.inventory-variance-bulk label { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); }
.inventory-variance-bulk input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-action); }
.inventory-variance-row .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.inventory-variance-bulk .inventory-primary-btn { margin-left: auto; }
.inventory-variance-list { display: block; overflow-x: auto; }
.inventory-variance-table { min-width: 1080px; }
.inventory-variance-header, .inventory-variance-row { display: grid; grid-template-columns: 38px 250px 90px 112px 96px 244px 250px; gap: var(--space-2); align-items: center; }
.inventory-variance-header { min-height: 42px; padding: 0 var(--space-3); border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); background: var(--color-canvas-soft); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); }
.inventory-variance-row { min-height: 68px; padding: 0 var(--space-3); border-bottom: 1px solid var(--color-border); background: var(--color-surface-raised); }
.inventory-variance-row:last-child { border-bottom: 0; }
.inventory-variance-row.is-selected { background: color-mix(in srgb, var(--color-action) 7%, var(--color-surface-raised)); }
.inventory-variance-item { min-width: 0; }
.inventory-variance-item strong, .inventory-variance-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-variance-item strong { font-size: var(--font-size-body); }
.inventory-variance-item span, .inventory-variance-value span { color: var(--color-text-muted); font-size: var(--font-size-caption); }
.inventory-variance-value { display: grid; gap: 2px; }
.inventory-variance-value strong { font-size: var(--font-size-small); font-variant-numeric: tabular-nums; }
.inventory-variance-value--difference strong { color: var(--color-danger); }
.inventory-variance-value--positive strong { color: var(--color-success); }
.inventory-variance-projection { display: grid; gap: 3px; color: var(--color-text-muted); font-size: var(--font-size-caption); }
.inventory-variance-projection strong { color: var(--color-text); font-size: var(--font-size-small); font-variant-numeric: tabular-nums; }
.inventory-variance-actions { display: flex; align-items: center; gap: var(--space-2); }
.inventory-variance-actions .inventory-primary-btn { flex: 1; white-space: nowrap; }
.inventory-variance-actions .inventory-secondary-btn { white-space: nowrap; }
@media (max-width: 620px) {
  .inventory-variance-bulk { margin-inline: calc(var(--space-3) * -1); padding: var(--space-2) var(--space-3); border-block: 1px solid var(--color-border); overflow-x: auto; white-space: nowrap; }
  .inventory-variance-bulk button { flex: 0 0 auto; }
  .inventory-variance-list { margin-inline: calc(var(--space-3) * -1); border-block: 1px solid var(--color-border); }
  .inventory-variance-table { min-width: 820px; }
  .inventory-variance-header, .inventory-variance-row { grid-template-columns: 30px 128px 54px 54px 54px 200px 230px; gap: 6px; padding-inline: var(--space-3); }
  .inventory-variance-header > :nth-child(2), .inventory-variance-row .inventory-variance-item { position: sticky; left: 30px; z-index: 1; }
  .inventory-variance-header > :nth-child(2) { background: var(--color-canvas-soft); }
  .inventory-variance-row .inventory-variance-item { background: var(--color-surface-raised); }
  .inventory-variance-row.is-selected .inventory-variance-item { background: color-mix(in srgb, var(--color-action) 7%, var(--color-surface-raised)); }
}