/* =====================================================================
   DESIGN SYSTEM DEL BACKOFFICE — portado 1:1 de Utilidades/diseno-backoffice-v2
   Los tokens mapean directamente al MudTheme (Shared/Theme/EcommerceTheme.cs).
   ===================================================================== */
:root {
  --palette-primary: #ec3013;
  --palette-secondary: #201e1d;
  --palette-tertiary: #6b6764;
  --palette-success: #1f7a33;
  --palette-info: #1a6fa8;
  --palette-warning: #b57400;
  --palette-error: #b3261e;
  --palette-background: #f3f2f2;
  --palette-surface: #ffffff;
  --palette-appbar: #ffffff;
  --palette-drawer: #ffffff;
  --palette-text-primary: #201e1d;
  --palette-text-secondary: #6b6764;
  --palette-text-disabled: #a3a09d;
  --palette-divider: #dcd9d6;
  --palette-action-default: #201e1d;
  --palette-action-disabled: #a3a09d;
  /* derivados (tintes de los anteriores, no colores nuevos) */
  --tint-primary: rgba(236, 48, 19, 0.08);
  --tint-hover: rgba(32, 30, 29, 0.05);
  --tint-success: rgba(31, 122, 51, 0.12);
  --tint-warning: rgba(181, 116, 0, 0.12);
  --tint-error: rgba(179, 38, 30, 0.10);
  --tint-info: rgba(26, 111, 168, 0.12);
  --radius: 0px; --radius-sm: 0px; --radius-lg: 0px;
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(32, 30, 29, 0.10);
  --elevation-2: 0 8px 32px rgba(32, 30, 29, 0.22);
}
[data-theme="dark"] {
  --palette-primary: #ff5a3c;
  --palette-secondary: #f3f2f2;
  --palette-tertiary: #b0aca9;
  --palette-success: #57b374;
  --palette-info: #5aa9dd;
  --palette-warning: #e0a63f;
  --palette-error: #e57373;
  --palette-background: #161514;
  --palette-surface: #201e1d;
  --palette-appbar: #201e1d;
  --palette-drawer: #1b1a19;
  --palette-text-primary: #f3f2f2;
  --palette-text-secondary: #b0aca9;
  --palette-text-disabled: #6b6764;
  --palette-divider: #3a3735;
  --palette-action-default: #f3f2f2;
  --palette-action-disabled: #6b6764;
  --tint-primary: rgba(255, 90, 60, 0.14);
  --tint-hover: rgba(243, 242, 242, 0.06);
  --tint-success: rgba(87, 179, 116, 0.16);
  --tint-warning: rgba(224, 166, 63, 0.16);
  --tint-error: rgba(229, 115, 115, 0.14);
  --tint-info: rgba(90, 169, 221, 0.16);
  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --elevation-2: 0 8px 32px rgba(0, 0, 0, 0.6);
}
* { box-sizing: border-box }
html, body { margin: 0; padding: 0 }
body { background: var(--palette-background); color: var(--palette-text-primary); font-family: 'Archivo', sans-serif; font-size: 15px; line-height: 1.5 }
a { color: var(--palette-info); text-decoration: none }
a:hover { text-decoration: underline; color: var(--palette-primary) }
::selection { background: var(--tint-primary) }
:focus-visible { outline: 2px solid var(--palette-primary); outline-offset: 2px }
.msr { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; display: inline-block; flex: none; user-select: none; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20 }
/* ============ TIPOGRAFÍA — roles MudBlazor ============ */
.typo-h1 { font-size: 40px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin: 0 }
.typo-h2 { font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; margin: 0 }
.typo-h3 { font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; margin: 0 }
.typo-h4 { font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: 0; margin: 0 }
.typo-h5 { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: 0; margin: 0 }
.typo-h6 { font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: 0; margin: 0 }
.typo-subtitle1 { font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0 }
.typo-subtitle2 { font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.01em }
.typo-body1 { font-size: 15px; font-weight: 400; line-height: 1.5; letter-spacing: 0 }
.typo-body2 { font-size: 13px; font-weight: 400; line-height: 1.45; letter-spacing: 0 }
.typo-button { font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 0.03em }
.typo-caption { font-size: 12px; font-weight: 400; line-height: 1.35; letter-spacing: 0.01em }
.typo-overline { font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase }
.text-secondary { color: var(--palette-text-secondary) }
/* ============ LAYOUT ============ */
.layout { display: flex; height: 100vh; overflow: hidden }
.drawer { width: 248px; flex: none; background: var(--palette-drawer); border-right: 1px solid var(--palette-divider); display: flex; flex-direction: column; transition: width .15s ease }
.drawer--collapsed { width: 64px }
.drawer__brand { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; border-bottom: 2px solid var(--palette-text-primary); flex: none; overflow: hidden }
.drawer__logo { width: 28px; height: 28px; flex: none; background: var(--palette-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px }
.drawer__nav { flex: 1; padding: 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px }
.drawer__footer { padding: 12px 16px; border-top: 1px solid var(--palette-divider); color: var(--palette-text-disabled); white-space: nowrap; overflow: hidden }
.nav-link { display: flex; align-items: center; gap: 12px; padding: 8px 12px; color: var(--palette-text-primary); cursor: pointer; border: none; background: none; width: 100%; text-align: left; font-family: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden }
.nav-link:hover { background: var(--tint-hover) }
.nav-link:active { background: var(--tint-primary) }
.nav-link--active { background: var(--tint-primary); color: var(--palette-primary); box-shadow: inset 2px 0 0 var(--palette-primary) }
.nav-link--child { padding-left: 44px }
.drawer--collapsed .nav-link { justify-content: center; padding: 8px }
.drawer--collapsed .nav-link__label, .drawer--collapsed .nav-link__chev, .drawer--collapsed .drawer__brandname, .drawer--collapsed .nav-group__tag { display: none }
.drawer--collapsed .nav-link--child { padding-left: 8px }
.nav-link__label { flex: 1 }
.nav-group__tag { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; background: var(--tint-hover); color: var(--palette-text-secondary); border: 1px solid var(--palette-divider) }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0 }
.appbar { height: 56px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: var(--palette-appbar); border-bottom: 2px solid var(--palette-text-primary) }
.appbar__spacer { flex: 1 }
.appbar__search { display: flex; align-items: center; gap: 8px; width: 320px; height: 36px; padding: 0 12px; border: 1px solid var(--palette-divider); background: var(--palette-background); color: var(--palette-text-secondary) }
.appbar__search:focus-within { border-color: var(--palette-primary) }
.appbar__search input { border: none; background: none; outline: none; flex: 1; font-family: inherit; font-size: 14px; color: var(--palette-text-primary) }
.appbar__vdiv { width: 1px; height: 24px; background: var(--palette-divider); margin: 0 4px }
.content { flex: 1; overflow-y: auto; padding: 24px }
.content__inner { max-width: 1200px; margin: 0 }
/* ============ BOTONES (labels flush-left) ============ */
.btn { display: inline-flex; align-items: center; justify-content: flex-start; text-align: left; white-space: nowrap; gap: 8px; height: 36px; padding: 0 16px; border: 1px solid transparent; background: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.03em; color: var(--palette-action-default) }
.btn .msr { font-size: 18px }
.btn--primary { background: var(--palette-primary); color: #ffffff; border-color: var(--palette-primary) }
.btn--primary:hover { background: var(--palette-secondary); border-color: var(--palette-secondary) }
[data-theme="dark"] .btn--primary { color: #161514 }
[data-theme="dark"] .btn--primary:hover { color: var(--palette-background) }
.btn--primary:active { background: var(--palette-primary); opacity: .85 }
.btn--outlined { border-color: var(--palette-text-primary) }
.btn--outlined:hover { background: var(--tint-hover) }
.btn--outlined:active { background: var(--tint-primary) }
.btn--text:hover { background: var(--tint-hover) }
.btn--danger { background: var(--palette-error); color: #fff; border-color: var(--palette-error) }
.btn--danger:hover { opacity: .85 }
.btn:disabled { opacity: .45; cursor: default; pointer-events: none }
.btn--loading { pointer-events: none }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: none; cursor: pointer; color: var(--palette-action-default) }
.icon-btn:hover { background: var(--tint-hover) }
.icon-btn:active { background: var(--tint-primary); color: var(--palette-primary) }
.icon-btn:disabled { color: var(--palette-action-disabled); cursor: default; pointer-events: none }
.icon-btn--sm { width: 28px; height: 28px }
.icon-btn--sm .msr { font-size: 18px }
.spinner { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: om-spin .7s linear infinite }
/* ============ CHIPS / TAGS ============ */
.chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid transparent; white-space: nowrap }
.chip--success { background: var(--tint-success); color: var(--palette-success); border-color: var(--palette-success) }
.chip--neutral { background: var(--tint-hover); color: var(--palette-text-secondary); border-color: var(--palette-divider) }
.chip--error { background: var(--tint-error); color: var(--palette-error); border-color: var(--palette-error) }
.chip--warning { background: var(--tint-warning); color: var(--palette-warning); border-color: var(--palette-warning) }
.chip--info { background: var(--tint-info); color: var(--palette-info); border-color: var(--palette-info) }
.chip--outline { border-color: var(--palette-divider); color: var(--palette-text-primary) }
/* ============ FORMULARIOS ============ */
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.field__label { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--palette-text-secondary) }
.field__helper { font-size: 12px; color: var(--palette-text-secondary) }
.field--error .input, .field--error .select { border-color: var(--palette-error) }
.field--error .field__helper, .field--error .field__label { color: var(--palette-error) }
.input, .select, .textarea { height: 36px; padding: 0 12px; border: 1px solid var(--palette-divider); background: var(--palette-surface); color: var(--palette-text-primary); font-family: inherit; font-size: 14px; width: 100% }
.textarea { height: auto; padding: 8px 12px; resize: vertical; line-height: 1.5 }
.textarea--code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px }
.input:hover, .select:hover, .textarea:hover { border-color: var(--palette-text-secondary) }
.input:focus, .select:focus, .textarea:focus { border-color: var(--palette-primary); outline: none }
.input:disabled, .select:disabled { background: var(--palette-background); color: var(--palette-text-disabled); border-color: var(--palette-divider) }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--palette-text-secondary) 50%), linear-gradient(135deg, var(--palette-text-secondary) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; cursor: pointer }
/* multiselect buscable de los filtros */
.msel { position: relative; display: inline-block }
.msel__trigger { display: flex; align-items: center; gap: 8px; height: 36px; width: 100%; padding: 0 10px 0 12px; border: 1px solid var(--palette-divider); background: var(--palette-surface); color: var(--palette-text-primary); font-family: inherit; font-size: 14px; cursor: pointer; text-align: left }
.msel__trigger:hover { border-color: var(--palette-text-secondary) }
.msel__trigger:disabled { background: var(--palette-background); color: var(--palette-text-disabled); cursor: default }
.msel__trigger--on { border-color: var(--palette-primary); background: var(--tint-primary) }
.msel__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.msel__count { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--palette-primary); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center }
.msel__panel { position: absolute; z-index: 41; top: calc(100% + 4px); left: 0; min-width: 100%; width: max-content; max-width: 320px; background: var(--palette-surface); border: 1px solid var(--palette-text-primary); box-shadow: var(--elevation-2) }
.msel__search { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--palette-divider) }
.msel__input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-family: inherit; font-size: 14px; color: var(--palette-text-primary) }
.msel__clearsearch { display: inline-flex; border: none; background: none; cursor: pointer; color: var(--palette-text-secondary); padding: 0 }
.msel__list { max-height: 280px; overflow-y: auto; padding: 4px 0 }
.msel__opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 12px; border: none; background: none; cursor: pointer; font-family: inherit; font-size: 14px; color: var(--palette-text-primary); text-align: left }
.msel__opt:hover { background: var(--tint-hover) }
.msel__opt--sel { background: var(--tint-primary) }
.msel__box { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none; border: 1px solid var(--palette-text-secondary); color: var(--palette-primary) }
.msel__opt--sel .msel__box { border-color: var(--palette-primary) }
.msel__opt--all { color: var(--palette-primary) }
.msel__box--part { border-color: var(--palette-primary) }
.msel__sep { height: 1px; background: var(--palette-divider); margin: 4px 0 }
.msel__opttext { flex: 1; min-width: 0; overflow-wrap: anywhere }
.msel__empty { padding: 12px }
.msel__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--palette-divider) }
.msel__link { display: inline-flex; align-items: center; gap: 4px; border: none; background: none; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--palette-primary); padding: 0 }
.input-group { display: flex; align-items: stretch }
.input-group__prefix { display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--palette-divider); border-right: none; background: var(--palette-background); color: var(--palette-text-secondary); font-size: 13px; white-space: nowrap }
.checkline { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; user-select: none }
.checkline input { width: 16px; height: 16px; accent-color: var(--palette-primary); margin: 0 }
/* switch */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 14px }
.switch__input { position: absolute; opacity: 0; width: 0; height: 0 }
.switch__track { width: 36px; height: 20px; flex: none; background: var(--palette-text-disabled); position: relative; transition: background .15s }
.switch__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--palette-surface); transition: transform .15s }
.switch__input:checked + .switch__track { background: var(--palette-primary) }
.switch__input:checked + .switch__track::after { transform: translateX(16px) }
.switch__input:focus-visible + .switch__track { outline: 2px solid var(--palette-primary); outline-offset: 2px }
/* segmented */
.seg { display: inline-flex; border: 1px solid var(--palette-text-primary) }
.seg__opt { height: 28px; padding: 0 12px; border: none; background: none; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--palette-text-primary); display: inline-flex; align-items: center; gap: 6px }
.seg__opt:hover { background: var(--tint-hover) }
.seg__opt--active { background: var(--palette-text-primary); color: var(--palette-surface) }
/* ============ SUPERFICIES ============ */
.paper { background: var(--palette-surface); border: 1px solid var(--palette-divider); box-shadow: var(--elevation-0) }
.toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--palette-divider); flex-wrap: wrap }
.page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 16px; flex-wrap: wrap }
.page-head__grow { flex: 1; min-width: 200px }
/* El grupo de acciones envuelve como una unidad y se mantiene a la derecha */
.page-head__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto }
@media (max-width:600px) { .page-head__actions { width: 100%; margin-left: 0 } .page-head__actions .btn { flex: 1 } }
.breadcrumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--palette-text-secondary); margin-bottom: 8px }
.breadcrumbs a { color: var(--palette-text-secondary) }
.breadcrumbs a:hover { color: var(--palette-primary); text-decoration: none }
/* ============ TABLA ============ */
.table { width: 100%; border-collapse: collapse; min-width: 880px }
.table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--palette-text-secondary); padding: 8px 16px; border-bottom: 2px solid var(--palette-text-primary); white-space: nowrap }
.table td { padding: 8px 16px; border-bottom: 1px solid var(--palette-divider); font-size: 13px; vertical-align: middle }
.table__row { height: 48px }
.table__row:hover { background: var(--tint-hover) }
.table__row--dim { opacity: .6 }
.table__num { text-align: right }
.table__actions { white-space: nowrap; text-align: right }
.th-sort { display: inline-flex; align-items: center; gap: 4px; border: none; background: none; padding: 0; font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--palette-text-secondary); cursor: pointer }
.th-sort:hover { color: var(--palette-text-primary) }
.th-sort .msr { font-size: 16px; opacity: .3; transition: opacity .1s }
.th-sort:hover .msr { opacity: .6 }
.th-sort--active { color: var(--palette-primary) }
.th-sort--active .msr { opacity: 1 }
th.table__num .th-sort { flex-direction: row-reverse }
.sort-mobile { display: none }
@media (max-width:600px) { .sort-mobile { display: flex; align-items: center; gap: 8px; width: 100% } }
.pagination { display: flex; align-items: center; gap: 8px; padding: 8px 16px; justify-content: flex-end; font-size: 13px; color: var(--palette-text-secondary); flex-wrap: wrap }
.pagination .select { width: auto; height: 28px; font-size: 13px }
/* ============ ESTADO VACÍO (patrón único) ============ */
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 48px 24px; color: var(--palette-text-secondary); max-width: 520px }
.empty .msr { font-size: 40px; color: var(--palette-text-disabled) }
.empty__title { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--palette-text-primary) }
.empty__text { font-size: 13px; line-height: 1.45; margin: 0 }
.empty__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px }
.empty--sm { padding: 32px 16px }
.empty--sm .msr { font-size: 28px }
/* ============ ESTADO DE CARGA (skeleton único) ============ */
.skel { display: block; height: 12px; background: var(--palette-divider); background-image: linear-gradient(90deg, transparent 0%, var(--tint-hover) 50%, transparent 100%); background-size: 200% 100%; background-repeat: no-repeat; animation: om-shimmer 1.2s linear infinite }
@keyframes om-shimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }
.skel-row { display: flex; align-items: center; gap: 16px; padding: 18px 16px; border-bottom: 1px solid var(--palette-divider) }
.skel-row:last-child { border-bottom: none }
.skel-card { border: 1px solid var(--palette-divider); background: var(--palette-surface) }
.skel-card__photo { aspect-ratio: 1; background: var(--palette-background); border-bottom: 1px solid var(--palette-divider) }
.skel-card__body { padding: 12px; display: flex; flex-direction: column; gap: 8px }
.loading-bar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--palette-divider); color: var(--palette-text-secondary); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase }
.loading-bar .spinner { border-color: var(--palette-divider); border-top-color: var(--palette-primary); width: 14px; height: 14px }
/* celdas producto */
.prod-cell { display: flex; align-items: center; gap: 12px; min-width: 0 }
.prod-cell--link { width: 100%; border: none; background: none; font-family: inherit; text-align: left; cursor: pointer; padding: 8px 16px; margin: 0; color: inherit; white-space: nowrap }
.prod-cell--link:hover .prod-cell__name { color: var(--palette-primary); text-decoration: underline }
.prod-cell--link:active { background: var(--tint-primary) }
.table td.table__cell--link { padding: 0 }
.table td.table__cell--link::before { display: none }
.thumb { width: 32px; height: 32px; flex: none; background: var(--palette-background); border: 1px solid var(--palette-divider); display: flex; align-items: center; justify-content: center; color: var(--palette-text-secondary) }
.price--old { color: var(--palette-text-disabled); text-decoration: line-through; margin-left: 6px; font-size: 12px }
.price--sale { color: var(--palette-primary); font-weight: 600 }
.stock-cell { display: flex; align-items: center; gap: 8px }
.stock--out { color: var(--palette-error); font-weight: 600 }
.stock--low { color: var(--palette-warning); font-weight: 600 }
/* ============ AVATARES / MENÚS ============ */
.avatar { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; text-transform: uppercase }
.avatar--lg { width: 40px; height: 40px; font-size: 15px }
.tenant-btn { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 1px solid var(--palette-divider); background: none; cursor: pointer; font-family: inherit; color: var(--palette-text-primary); text-align: left }
.tenant-btn:hover { border-color: var(--palette-text-primary); background: var(--tint-hover) }
.tenant-btn__name { font-size: 13px; font-weight: 600; line-height: 1.2 }
.tenant-btn__domain { font-size: 11px; color: var(--palette-text-secondary); line-height: 1.2 }
.menu-backdrop { position: fixed; inset: 0; z-index: 40 }
.menu { position: fixed; z-index: 41; min-width: 260px; background: var(--palette-surface); border: 1px solid var(--palette-text-primary); box-shadow: var(--elevation-2); padding: 4px 0 }
.menu__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 16px; border: none; background: none; cursor: pointer; font-family: inherit; font-size: 14px; color: var(--palette-text-primary); text-align: left }
.menu__item:hover { background: var(--tint-hover) }
.menu__item:disabled { color: var(--palette-text-disabled); cursor: default }
.menu__item--active { background: var(--tint-primary) }
.menu__divider { height: 1px; background: var(--palette-divider); margin: 4px 0 }
.menu__header { padding: 8px 16px 4px }
/* ============ TABS ============ */
.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--palette-text-primary) }
.tab { height: 40px; padding: 0 20px; border: none; background: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .03em; color: var(--palette-text-secondary); display: inline-flex; align-items: center; gap: 8px }
.tab:hover { background: var(--tint-hover); color: var(--palette-text-primary) }
.tab--active { color: var(--palette-primary); box-shadow: inset 0 -2px 0 var(--palette-primary) }
/* ============ DIALOG / SNACKBAR ============ */
.dialog-backdrop { position: fixed; inset: 0; background: rgba(22, 21, 20, .5); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; overflow-y: auto }
/* Catálogos abiertos DESDE otro modal: viven una capa arriba */
.dialog-backdrop--nested { z-index: 52 }
.dialog { background: var(--palette-surface); border: 1px solid var(--palette-text-primary); box-shadow: var(--elevation-2); width: 480px; max-width: 100% }
.dialog--lg { width: 720px }
.dialog__title { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 2px solid var(--palette-text-primary) }
.dialog__title .typo-h6 { flex: 1 }
.dialog__body { padding: 24px }
.dialog__actions { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--palette-divider) }
.snackbar { position: fixed; left: 24px; bottom: 24px; z-index: 60; background: var(--palette-secondary); color: var(--palette-surface); padding: 12px 20px; display: flex; align-items: center; gap: 12px; box-shadow: var(--elevation-2); font-size: 14px }
[data-theme="dark"] .snackbar { background: #f3f2f2; color: #201e1d }
/* ============ EDITOR / IMÁGENES / GRID ============ */
.rte { border: 1px solid var(--palette-divider) }
.rte__toolbar { display: flex; align-items: center; gap: 2px; padding: 4px 8px; border-bottom: 1px solid var(--palette-divider); background: var(--palette-background); flex-wrap: wrap }
.rte__body { min-height: 160px; padding: 12px 16px; outline: none; font-size: 14px; line-height: 1.6; background: var(--palette-surface) }
.rte__body:focus { box-shadow: inset 0 0 0 1px var(--palette-primary) }
.img-row { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border: 1px solid var(--palette-divider); background: var(--palette-surface) }
.img-row__thumb { width: 56px; height: 56px; flex: none; border: 1px solid var(--palette-divider); display: flex; align-items: center; justify-content: center; color: var(--palette-text-secondary) }
.img-row__grow { flex: 1; min-width: 0 }
.img-add { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px dashed var(--palette-text-secondary); background: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--palette-text-secondary); width: 100% }
.img-add:hover { border-color: var(--palette-primary); color: var(--palette-primary) }
.form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px }
.col-12 { grid-column: span 12 } .col-6 { grid-column: span 6 } .col-4 { grid-column: span 4 } .col-3 { grid-column: span 3 } .col-8 { grid-column: span 8 }
/* ============ BREAKPOINTS MudBlazor: xs 0 · sm 600 · md 960 · lg 1280 · xl 1920 ============ */
.nav-backdrop { display: none }
@media (max-width:1280px) { .appbar__search { width: 240px } }
@media (max-width:960px) { .col-6, .col-4, .col-3, .col-8 { grid-column: span 12 } .appbar__search { width: 180px } .content { padding: 16px } .dialog--lg { width: 100% } }
@media (max-width:600px) {
  .drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 46; width: 264px; transform: translateX(-100%); box-shadow: var(--elevation-2) }
  .drawer--collapsed { width: 264px }
  .drawer--collapsed .nav-link { justify-content: flex-start; padding: 12px }
  .drawer--collapsed .nav-link--child { padding-left: 44px }
  .drawer--collapsed .nav-link__label, .drawer--collapsed .nav-link__chev, .drawer--collapsed .drawer__brandname, .drawer--collapsed .nav-group__tag { display: inline }
  .drawer--mobile-open { transform: none }
  .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(22, 21, 20, .5); z-index: 45 }
  .nav-link { min-height: 48px }
  .appbar { padding: 0 8px; gap: 4px }
  .appbar__search { display: none }
  .appbar__search--mobile { display: flex; width: 100%; margin: 0 0 16px }
  .tenant-btn { padding: 0 8px; gap: 8px }
  .tenant-btn__domain { display: none }
  .tenant-btn__name { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .content { padding: 12px }
  .icon-btn { width: 44px; height: 44px }
  .icon-btn--sm { width: 36px; height: 36px }
  .btn { height: 44px }
  .toolbar { padding: 12px; gap: 8px }
  .toolbar .field { width: 100% !important }
  .page-head { align-items: stretch; flex-direction: column; gap: 12px }
  .page-head .btn { width: 100% }
  .tabs { overflow-x: auto; scrollbar-width: none }
  .tab { padding: 0 16px; flex: none; height: 48px }
  .dialog-backdrop { padding: 0; align-items: stretch }
  .dialog, .dialog--lg { width: 100%; min-height: 100%; border: none }
  .dialog__body { padding: 16px }
  .dialog__title, .dialog__actions { padding: 12px 16px; position: sticky; background: var(--palette-surface); z-index: 1 }
  .dialog__title { top: 0 }
  .dialog__actions { bottom: 0 }
  .dialog__actions .btn { flex: 1 }
  .menu { left: 8px !important; right: 8px !important; width: auto !important; min-width: 0 }
  .snackbar { left: 12px; right: 12px; bottom: 12px }
  .stat { flex: 1 }
  /* Tabla densa → tarjetas apiladas */
  .table thead { display: none }
  .table { min-width: 0 }
  .table, .table tbody, .table tr, .table td { display: block; width: 100% }
  .prod-cell--link { white-space: normal }
  .table__row { height: auto; border-bottom: 2px solid var(--palette-divider); padding: 8px 0; position: relative }
  .table td { border: none; padding: 4px 12px; display: flex; align-items: center; gap: 8px }
  .table td[data-label]::before { content: attr(data-label); flex: none; width: 88px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--palette-text-secondary) }
  .table td.table__num { text-align: left }
  .table__actions { justify-content: flex-end; position: absolute; top: 8px; right: 4px; padding: 0 }
  .prod-cell--link { padding-right: 44px }
  .pagination { justify-content: flex-start; padding: 12px }
}
.stat { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border: 1px solid var(--palette-divider); background: var(--palette-surface); min-width: 160px }
.stat__num { font-size: 32px; font-weight: 700; line-height: 1.1 }
.section { margin-bottom: 24px }
.section__head { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 2px solid var(--palette-text-primary) }
.section__head .msr { font-size: 20px; color: var(--palette-text-secondary) }
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; padding: 16px; border: 1px solid var(--palette-divider); background: var(--palette-surface) }
.kv { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.kv__k { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--palette-text-secondary) }
.kv__v { font-size: 15px; font-weight: 500; overflow-wrap: anywhere }
.totals { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--palette-divider); background: var(--palette-surface); max-width: 360px; margin-left: auto }
.totals__row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px }
.totals__row--total { border-top: 1px solid var(--palette-divider); margin-top: 8px; padding-top: 8px; font-size: 17px; font-weight: 700 }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px }
.date { cursor: help; text-decoration: underline dotted 1px; text-decoration-color: var(--palette-divider); text-underline-offset: 3px }
.table--fit { min-width: 0; width: 100%; max-width: 100% }
.table--fit th, .table--fit td { padding-left: 8px; padding-right: 8px; white-space: normal; overflow-wrap: anywhere }
.table--fit th:first-child, .table--fit td:first-child { padding-left: 16px }
.table--fit th:last-child, .table--fit td:last-child { padding-right: 16px }
.table--fit .nowrap, .table--fit td[data-label="Fecha"], .table--fit td[data-label="Monto"], .table--fit td[data-label="Estado"], .table--fit .table__num { white-space: nowrap }
.table--fit .cell--truncate { max-width: 0; width: 24%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.raw-btn { display: block; width: 100%; max-width: 100%; border: none; background: none; padding: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--palette-text-secondary); text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--palette-divider) }
.raw-btn:hover { color: var(--palette-primary); text-decoration-color: currentColor }
.code-block { margin: 0; padding: 16px; background: var(--palette-background); border: 1px solid var(--palette-divider); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow-y: auto }
.status-picker { display: flex; flex-direction: column; gap: 8px }
.status-opt { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--palette-divider); background: var(--palette-surface); cursor: pointer; font-family: inherit; text-align: left; width: 100%; color: inherit }
.status-opt:hover { border-color: var(--palette-text-primary); background: var(--tint-hover) }
.status-opt--sel { border-color: var(--palette-primary); background: var(--tint-primary) }
/* ============ NUEVA ORDEN (stepper + selector de productos + carrito) ============ */
.stepper { display: flex; border: 1px solid var(--palette-divider); background: var(--palette-surface); margin-bottom: 24px; overflow-x: auto }
.step { display: flex; align-items: center; gap: 12px; padding: 16px 20px; flex: 1; min-width: 200px; border-right: 1px solid var(--palette-divider); background: none; font-family: inherit; text-align: left; cursor: pointer; color: var(--palette-text-secondary) }
.step:last-child { border-right: none }
.step:hover { background: var(--tint-hover) }
.step--active { color: var(--palette-text-primary); box-shadow: inset 0 -2px 0 var(--palette-primary) }
.step--todo { cursor: default; opacity: .6 }
.step__num { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid currentColor; font-size: 13px; font-weight: 700 }
.step--active .step__num { background: var(--palette-primary); border-color: var(--palette-primary); color: #fff }
[data-theme="dark"] .step--active .step__num { color: #161514 }
.step--done .step__num { background: var(--palette-text-primary); border-color: var(--palette-text-primary); color: var(--palette-surface) }
.new-order { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start }
@media (max-width:960px) { .new-order { grid-template-columns: minmax(0, 1fr) } }
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 16px }
.prod-card { display: flex; flex-direction: column; border: 1px solid var(--palette-divider); background: var(--palette-surface) }
.prod-card--out { opacity: .6 }
.prod-card__photo { position: relative; aspect-ratio: 1; border: none; border-bottom: 1px solid var(--palette-divider); background: var(--palette-background); display: flex; align-items: center; justify-content: center; color: var(--palette-text-disabled); cursor: pointer; width: 100%; padding: 0 }
.prod-card__photo:hover { color: var(--palette-primary) }
.prod-card__photo .msr { font-size: 48px }
.prod-card__badge { position: absolute; top: 8px; left: 8px }
.prod-card__zoom { position: absolute; bottom: 8px; right: 8px; display: flex; align-items: center; gap: 4px; padding: 2px 6px; background: var(--palette-surface); border: 1px solid var(--palette-divider); font-size: 11px; font-weight: 600; color: var(--palette-text-secondary) }
.prod-card__body { padding: 12px; display: flex; flex-direction: column; gap: 4px; flex: 1 }
.prod-card__name { border: none; background: none; padding: 0; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.4; text-align: left; cursor: pointer; color: inherit }
.prod-card__name:hover { color: var(--palette-primary); text-decoration: underline }
.prod-card__foot { padding: 8px 12px; border-top: 1px solid var(--palette-divider); display: flex; align-items: center; gap: 8px }
.qty { display: flex; align-items: center; border: 1px solid var(--palette-divider) }
.qty__num { min-width: 32px; text-align: center; font-size: 13px; font-weight: 600 }
.cart { border: 1px solid var(--palette-divider); background: var(--palette-surface); position: sticky; top: 0 }
.cart__head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 2px solid var(--palette-text-primary) }
.cart__body { padding: 8px 16px; max-height: 340px; overflow-y: auto }
.cart__item { display: flex; align-items: flex-start; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--palette-divider) }
.cart__item:last-child { border-bottom: none }
.cart__foot { padding: 16px; border-top: 1px solid var(--palette-divider); display: flex; flex-direction: column; gap: 4px }
.photo-lg { aspect-ratio: 4/3; max-height: 280px; background: var(--palette-background); border: 1px solid var(--palette-divider); display: flex; align-items: center; justify-content: center; color: var(--palette-text-disabled) }
.peek-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px }
@media (max-width:600px) { .peek-grid { grid-template-columns: minmax(0, 1fr); gap: 16px } .photo-lg { max-height: 200px } }
.photo-lg .msr { font-size: 72px }
.thumbs { display: flex; gap: 8px; margin-top: 8px }
.thumb-sq { width: 56px; height: 56px; flex: none; border: 1px solid var(--palette-divider); background: var(--palette-background); display: flex; align-items: center; justify-content: center; color: var(--palette-text-secondary); cursor: pointer }
.thumb-sq--sel { border-color: var(--palette-primary); box-shadow: inset 0 0 0 1px var(--palette-primary) }
.radio-opt { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--palette-divider); background: var(--palette-surface); cursor: pointer; font-family: inherit; text-align: left; width: 100%; color: inherit }
.radio-opt:hover { border-color: var(--palette-text-primary); background: var(--tint-hover) }
.radio-opt--sel { border-color: var(--palette-primary); background: var(--tint-primary) }
/* ============ SPLASH + LOGIN ============ */
.splash { height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: 48px; background: var(--palette-background) }
.splash__mark { display: flex; align-items: center; gap: 16px }
.splash__logo { width: 56px; height: 56px; flex: none; background: var(--palette-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700 }
.splash__bar { height: 4px; background: var(--palette-divider); overflow: hidden }
.splash__fill { height: 100%; background: var(--palette-primary); width: 0; animation: om-load 1.6s ease-out forwards }
@keyframes om-load { from { width: 0 } to { width: 100% } }
.auth { height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) 480px }
.auth__poster { background: var(--palette-primary); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between }
[data-theme="dark"] .auth__poster { color: #161514 }
.auth__form { background: var(--palette-surface); border-left: 2px solid var(--palette-text-primary); padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; overflow-y: auto }
@media (max-width:960px) { .auth { grid-template-columns: minmax(0, 1fr) } .auth__poster { display: none } .auth__form { border-left: none; padding: 32px 24px } }
.auth__logo { width: 48px; height: 48px; background: #fff; color: var(--palette-primary); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700 }
.auth__alert { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border: 1px solid var(--palette-error); background: var(--tint-error); color: var(--palette-error); margin-bottom: 16px }
.auth__alert--info { border-color: var(--palette-info); background: var(--tint-info); color: var(--palette-info) }
.auth__alert--warning { border-color: var(--palette-warning); background: var(--tint-warning); color: var(--palette-warning) }
.input-pw { position: relative; display: flex }
.input-pw .icon-btn { position: absolute; right: 0; top: 0; height: 36px; width: 36px }
/* ============ CASCADA DE COSTOS (reparto secuencial) ============ */
.wf { border: 1px solid var(--palette-divider); background: var(--palette-surface) }
.wf__note { display: flex; align-items: flex-start; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--palette-divider); background: var(--palette-background); color: var(--palette-text-secondary); font-size: 13px; line-height: 1.45 }
.wf__row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--palette-divider) }
.wf__row:last-child { border-bottom: none }
.wf__row--void { opacity: .65 }
.wf__ord { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none }
.wf__ordnum { font-size: 13px; font-weight: 700; width: 24px; text-align: center }
.wf__grow { flex: 1; min-width: 0 }
.wf__math { font-size: 12px; color: var(--palette-text-secondary); line-height: 1.5; overflow-wrap: anywhere }
.wf__math b { color: var(--palette-text-primary); font-weight: 600 }
.wf__amt { font-size: 15px; font-weight: 600; white-space: nowrap; text-align: right }
.wf__amt--void { text-decoration: line-through; color: var(--palette-text-disabled) }
.wf__base { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border-top: 2px solid var(--palette-text-primary); font-weight: 700 }
/* ============ EDITOR DEL FLUJO DE ÓRDENES (mapa de etapas) ============ */
.flow { display: flex; flex-direction: column }
.flow__item { display: flex; gap: 14px }
.flow__rail { display: flex; flex-direction: column; align-items: center; width: 20px; flex: none }
.flow__rail .flow__dot { margin-top: 18px; box-shadow: 0 0 0 3px var(--tint-hover) }
.flow__dot { width: 13px; height: 13px; border-radius: 50%; flex: none }
.flow__line { width: 2px; flex: 1; background: var(--palette-divider); margin: 6px 0 }
.flow__card { flex: 1; min-width: 0; border: 1px solid var(--palette-divider); border-left: 4px solid var(--palette-divider); background: var(--palette-surface); padding: 12px 16px; margin-bottom: 14px }
.flow__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.flow__code { font-family: ui-monospace, monospace; font-size: 12px; color: var(--palette-text-secondary); background: var(--palette-background); border: 1px solid var(--palette-divider); padding: 1px 6px }
.flow__spacer { flex: 1 }
.flow__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
.flow__badges:empty { display: none }
.flow__next { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--palette-divider) }
.flow__arrow { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 8px; border: 1px solid currentColor }
.flow__swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--palette-divider); cursor: pointer; padding: 0 }
.flow__swatch--sel { border-color: var(--palette-text-primary); outline: 2px solid var(--palette-text-primary); outline-offset: 2px }
.flow__iconpick { display: flex; flex-wrap: wrap; gap: 6px }
.flow__iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--palette-divider); background: var(--palette-surface); cursor: pointer; color: inherit }
.flow__iconbtn:hover { border-color: var(--palette-text-primary) }
.flow__iconbtn--sel { border-color: var(--palette-primary); background: var(--tint-primary); color: var(--palette-primary) }
.stage { display: flex; border: 1px solid var(--palette-divider); background: var(--palette-surface); margin-bottom: 24px; overflow-x: auto }
.stage__s { display: flex; align-items: center; gap: 10px; padding: 14px 18px; flex: 1; min-width: 170px; border-right: 1px solid var(--palette-divider); color: var(--palette-text-disabled) }
.stage__s:last-child { border-right: none }
.stage__s--done { color: var(--palette-text-secondary) }
.stage__s--now { color: var(--palette-text-primary); box-shadow: inset 0 -2px 0 var(--palette-primary) }
.stage__s--void { color: var(--palette-error) }
.stage__dot { width: 10px; height: 10px; flex: none; border: 1px solid currentColor }
.stage__s--done .stage__dot, .stage__s--now .stage__dot { background: currentColor }
.stage__s--now .stage__dot { background: var(--palette-primary); border-color: var(--palette-primary) }
.ro { display: block; font-size: 15px; font-weight: 500; padding: 7px 0; border-bottom: 1px solid var(--palette-divider); overflow-wrap: anywhere }
.calc { background: var(--palette-background); border: 1px solid var(--palette-divider); padding: 2px 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--palette-text-secondary); white-space: nowrap }
.money { font-variant-numeric: tabular-nums; white-space: nowrap }
.neg { color: var(--palette-error) }
.pos { color: var(--palette-success) }
.dual { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end }
.dual__out { display: flex; flex-direction: column; gap: 4px }
.dual__val { height: 36px; display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--palette-divider); background: var(--palette-background); font-weight: 600; font-variant-numeric: tabular-nums }
.cascade { display: flex; flex-direction: column; border: 1px solid var(--palette-divider); background: var(--palette-surface) }
.cascade__r { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--palette-divider) }
.cascade__r:last-child { border-bottom: none }
.cascade__r--sum { border-top: 2px solid var(--palette-text-primary); background: var(--palette-background) }
.cascade__lbl { flex: 1; min-width: 0 }
.cascade__bar { width: 120px; height: 8px; flex: none; background: var(--palette-divider) }
.cascade__fill { height: 100%; display: block }
.cascade__amt { width: 132px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap }
.layer-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--palette-divider) }
.layer-row:last-child { border-bottom: none }
.layer-row--spent { opacity: .55 }
.layer-bar { width: 88px; height: 6px; flex: none; background: var(--palette-divider) }
.layer-bar span { display: block; height: 100%; background: var(--palette-primary) }
/* ============ SELECTOR DE PRODUCTO (reutilizable) ============ */
.ppick { border: 1px solid var(--palette-divider); background: var(--palette-surface) }
.ppick__search { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 40px; border-bottom: 1px solid var(--palette-divider); background: var(--palette-background); color: var(--palette-text-secondary) }
.ppick__search input { flex: 1; border: none; background: none; outline: none; font-family: inherit; font-size: 14px; color: var(--palette-text-primary) }
.ppick__list { max-height: 236px; overflow-y: auto }
.ppick__row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: none; border-bottom: 1px solid var(--palette-divider); background: none; cursor: pointer; font-family: inherit; text-align: left; color: inherit }
.ppick__row:last-child { border-bottom: none }
.ppick__row:hover { background: var(--tint-hover) }
.ppick__row--sel { background: var(--tint-primary); box-shadow: inset 2px 0 0 var(--palette-primary) }
.ppick__thumb { width: 44px; height: 44px; flex: none; background: var(--palette-background); border: 1px solid var(--palette-divider); display: flex; align-items: center; justify-content: center; color: var(--palette-text-secondary) }
.ppick__grow { flex: 1; min-width: 0 }
.ppick__desc { font-size: 12px; color: var(--palette-text-secondary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden }
.ppick__right { text-align: right; flex: none }
.cat-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--palette-divider) }
.cat-row:last-child { border-bottom: none }
.cat-row--off { opacity: .55 }
.field__row { display: flex; align-items: flex-end; gap: 8px }
.field__row .field { flex: 1; min-width: 0 }
.qcap { display: grid; grid-template-columns: 180px minmax(0, 1fr) 140px 150px auto; gap: 8px; align-items: end; padding: 12px 16px; border: 1px solid var(--palette-text-primary); background: var(--palette-surface); margin-bottom: 16px }
@media (max-width:960px) { .qcap { grid-template-columns: minmax(0, 1fr) } .dual { grid-template-columns: minmax(0, 1fr) } }
.pos-cell { display: flex; align-items: center; gap: 4px }
.pos-cell__num { width: 24px; text-align: center; font-weight: 600 }
.kwchips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 8px; border: 1px solid var(--palette-divider); background: var(--palette-surface) }
.kwchips input { border: none; outline: none; background: none; font-family: inherit; font-size: 13px; flex: 1; min-width: 120px; color: var(--palette-text-primary) }
.kwchip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 4px 0 8px; background: var(--tint-hover); border: 1px solid var(--palette-divider); font-size: 12px }
.kwchip .msr { font-size: 14px; cursor: pointer }
.kwchip .msr:hover { color: var(--palette-error) }
.ogslot { width: 200px; height: 104px; border: 1px dashed var(--palette-text-secondary); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--palette-text-secondary); font-size: 12px; cursor: pointer }
.ogslot:hover { border-color: var(--palette-primary); color: var(--palette-primary) }
@keyframes om-spin { to { transform: rotate(360deg) } }