/*!
 * YWLXWEB UI 改版 — P0-a 纯样式基础层
 * 依据: docs/design/ywlxweb-ui-redesign-v1.md
 * 纯 CSS / 无构建 / 无新依赖。
 *
 * 引入约定
 *   各页 <link rel="stylesheet" href="/css/app.css"> 必须排在
 *   /libs/element-plus/index.css 与页面内联 <style> 之后
 *   （即 </style> 之后、</head> 之前）。排错顺序会让页面内联样式反超本文件。
 *
 * 作用域约定
 *   §1–§8 = 设计系统层（tokens / Element Plus 主题映射 / 组件密度），
 *           属方案 §3.x 的全站组件规范，故写作全局选择器。
 *   §9    = 页面层，一律用各页唯一根类 .page-xxx 作用域。
 *           禁止把「某一页的特例」写成全局选择器。
 *           反例（本文件刻意不复刻）: inquiry-list 历史上的
 *           `.el-table{--el-checkbox-input-width:20px}` 这类全站泄漏写法。
 *   §10   = 窄屏响应式，只做「列隐藏 + 换行 + 内边距收敛」，不隐藏业务元素。
 *
 * 目录
 *   §1  设计 tokens                      → 方案 §3.2 / §3.3 / §3.4
 *   §2  Element Plus 主题映射            → 方案 §3.2 末（EP 变量覆盖）
 *   §3  基础排版与全局元素               → 方案 §3.4
 *   §4  表格密度 / 首末列 / 滚动策略     → 方案 §3.5
 *   §5  表单                             → 方案 §3.6
 *   §6  按钮层级                         → 方案 §3.7
 *   §7  标签 / 徽标 / 进度               → 方案 §3.8
 *   §8  分页 / 分隔线 / 弹层 / 空态      → 方案 §3.9
 *   §9  页面骨架与页级作用域             → 方案 附录 A + §4.4 / §4.5
 *   §10 窄屏响应式                       → 方案 §3.10
 */

/* ==========================================================================
   §1 设计 tokens（方案 §3.2 / §3.3 / §3.4）
   ========================================================================== */
:root {
  /* ---- 1.1 品牌色阶（主色 #1A56A0） ---- */
  --brand-50:  #EAF2FC;
  --brand-100: #D3E4FA;
  --brand-200: #A8C8F2;
  --brand-300: #78A7E6;
  --brand-400: #4A84D4;
  --brand-500: #2B6BC0;
  --brand-600: #1A56A0; /* 主色 */
  --brand-700: #12437E;
  --brand-800: #0D335F;
  --color-primary: var(--brand-600);

  /* ---- 1.2 中性色阶 ---- */
  --n-0:   #FFFFFF;
  --n-25:  #FAFBFC;
  --n-50:  #F5F7FA;
  --n-100: #EEF1F5;
  --n-200: #E2E6EC;
  --n-300: #CBD2DB;
  --n-400: #9AA5B1;
  --n-500: #6B7684;
  --n-600: #4A5563;
  --n-700: #333D49;
  --n-900: #1B222B;

  /* ---- 1.3 文本 ---- */
  --text-1: #1F2937;
  --text-2: #5A6472;
  /* 次要文字：#8A93A0 在白底只有 3.11:1，中文副行/能力标注/卡片副标全吃这一档，
     西语为主后这些副行仍要能被西语读者扫到，故统一提到 4.62:1（与占位同档）。
     这一档只用于 color（13 处），不动边框与分隔线。 */
  --text-3: #626C7A;
  --text-4: #B4BCC6;
  --text-inverse: #FFFFFF;

  /* ---- 1.4 边框 ---- */
  --border-1: #E2E6EC;
  --border-2: #EEF1F5;
  --border-strong: #CBD2DB;

  /* ---- 1.5 语义状态色（成功 / 警告 / 危险 / 信息） ---- */
  --success-600: #15803D;
  --success-500: #16A34A;
  --success-50:  #ECFDF3;
  --success-200: #BBF7D0;

  --warning-600: #B45309;
  --warning-500: #D97706;
  --warning-50:  #FFFBEB;
  --warning-200: #FDE68A;

  --danger-600: #B91C1C;
  --danger-500: #DC2626;
  --danger-50:  #FEF2F2;
  --danger-200: #FECACA;

  --info-600: #475569;
  --info-500: #64748B;
  --info-50:  #F1F5F9;
  --info-200: #E2E8F0;

  /* ---- 1.6 字体族 ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC",
    Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* ---- 1.7 字号阶梯 ---- */
  --fs-11: 11px; --lh-11: 1.55;
  --fs-12: 12px; --lh-12: 1.55;
  --fs-13: 13px; --lh-13: 1.55;
  --fs-14: 14px; --lh-14: 1.6;
  --fs-15: 15px; --lh-15: 1.6;
  --fs-16: 16px; --lh-16: 1.5;
  --fs-18: 18px; --lh-18: 1.4;
  --fs-20: 20px; --lh-20: 1.35;
  --fs-24: 24px; --lh-24: 1.3;
  --fs-30: 30px; --lh-30: 1.25;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --tr-tight: -0.01em;

  /* ---- 1.8 间距阶梯 ---- */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 12px;
  --sp-6: 16px;
  --sp-7: 20px;
  --sp-8: 24px;
  --sp-9: 32px;
  --sp-10: 40px;
  --sp-11: 48px;

  /* ---- 1.9 圆角 ---- */
  --r-sm: 3px;
  --r-base: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-pill: 999px;

  /* ---- 1.10 阴影 ---- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-base: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);
  --shadow-sticky: 0 -1px 0 var(--border-1), 0 -4px 12px rgba(16, 24, 40, .06);
  --shadow-col-left: 6px 0 8px -6px rgba(16, 24, 40, .12);
  --shadow-col-right: -6px 0 8px -6px rgba(16, 24, 40, .12);

  /* ---- 1.11 层级 / 高度契约 ---- */
  --z-header: 100;
  --z-sticky-bar: 90;
  --z-drawer: 2000;
  --z-taskcenter: 1900;

  --h-appbar: 56px;
  --h-filter: auto;
  --h-table-head: 44px;      /* 表头最小高度 */
  --h-row: 44px;             /* 单行最小高度 */
  --h-row-composite: 64px;   /* 复合列（多行内容）高度目标 */
  --h-pager: 56px;
  --h-actionbar: 56px;

  /* ---- 1.12 表格行悬停/着色（供组件层引用） ---- */
  --row-hover-bg: #F5F9FF;
  --table-head-bg: var(--n-25);
}

/* ==========================================================================
   §2 Element Plus 主题映射（方案 §3.2 末）
   只覆盖「主题变量」，不改组件内部结构；EP 2.x 需要同时给出
   light-3..9 与 dark-2，否则 hover / plain / disabled 仍沿用 Element 蓝。
   ========================================================================== */
:root {
  /* ---- 2.1 主色全色阶 ---- */
  --el-color-primary: var(--brand-600);
  --el-color-primary-rgb: 26, 86, 160;
  --el-color-primary-light-3: #4A84D4;
  --el-color-primary-light-5: #78A7E6;
  --el-color-primary-light-7: #A8C8F2;
  --el-color-primary-light-8: #D3E4FA;
  --el-color-primary-light-9: #EAF2FC;
  --el-color-primary-dark-2: #12437E;

  /* ---- 2.2 语义色主色 + light-9（tag / plain 底色） ---- */
  --el-color-success: var(--success-500);
  --el-color-success-rgb: 22, 163, 74;
  --el-color-success-light-9: var(--success-50);
  --el-color-warning: var(--warning-500);
  --el-color-warning-rgb: 217, 119, 6;
  --el-color-warning-light-9: var(--warning-50);
  --el-color-danger: var(--danger-500);
  --el-color-danger-rgb: 220, 38, 38;
  --el-color-danger-light-9: var(--danger-50);
  --el-color-error: var(--danger-500);
  --el-color-error-rgb: 220, 38, 38;
  --el-color-error-light-9: var(--danger-50);
  --el-color-info: var(--info-500);
  --el-color-info-rgb: 100, 116, 139;
  --el-color-info-light-9: var(--info-50);

  /* ---- 2.3 文本色 ---- */
  --el-text-color-primary: var(--text-1);
  --el-text-color-regular: var(--text-2);
  --el-text-color-secondary: var(--text-3);
  --el-text-color-placeholder: var(--n-500);
  --el-text-color-disabled: var(--text-4);

  /* ---- 2.4 边框 / 填充 / 背景 ---- */
  --el-border-color: var(--border-1);
  --el-border-color-light: var(--border-2);
  --el-border-color-lighter: var(--border-2);
  --el-border-color-extra-light: var(--border-2);
  --el-border-color-hover: var(--border-strong);
  --el-border-color-darker: var(--border-strong);
  --el-fill-color-blank: #FFFFFF;
  --el-fill-color-light: var(--n-100);
  --el-fill-color-lighter: var(--n-50);
  --el-bg-color-page: var(--n-50);

  /* ---- 2.5 圆角 / 字体 / 阴影 ---- */
  --el-border-radius-base: 4px;
  --el-border-radius-small: 3px;
  --el-font-size-base: 14px;
  --el-font-family: var(--font-sans);
  --el-box-shadow-light: 0 4px 12px rgba(16, 24, 40, .08);
  --el-box-shadow: 0 12px 32px rgba(16, 24, 40, .12);
  --el-box-shadow-lighter: 0 1px 2px rgba(16, 24, 40, .06);
}

/* ==========================================================================
   §3 基础排版与全局元素（方案 §3.4）
   ========================================================================== */
body {
  font-family: var(--font-sans);
  color: var(--text-1);
  background: var(--n-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 页面主标题（各页 <h2> 中文 + 西语 span；只调字号/字重，不动文案与结构） */
h2 {
  font-size: var(--fs-20);
  line-height: var(--lh-20);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-tight);
  color: var(--text-1);
}

/* 键盘可达性：统一焦点环（只补 EP 未覆盖的原生可聚焦元素） */
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 2px;
}

/* 横向滚动条（表格内由 §4.6 常显；此处统一视觉） */
.el-scrollbar__bar > div {
  background-color: var(--border-strong);
}

/* ==========================================================================
   §4 表格密度 / 首末列 / 滚动策略（方案 §3.5）
   ========================================================================== */
.el-table {
  /* 4.1 主题变量：表头底色、行悬停、边框、文字色 */
  --el-table-border-color: var(--border-1);
  --el-table-border: 1px solid var(--border-1);
  --el-table-text-color: var(--text-1);
  --el-table-header-text-color: var(--text-2);
  --el-table-header-bg-color: var(--table-head-bg);
  --el-table-tr-bg-color: var(--n-0);
  --el-table-bg-color: var(--n-0);
  --el-table-row-hover-bg-color: var(--row-hover-bg);
  --el-table-current-row-bg-color: var(--brand-50);
  --el-table-expanded-cell-bg-color: var(--n-25);
  font-size: var(--fs-13);
  color: var(--text-1);
  max-width: 100%;
}

/* 4.2 表头：最小 44px，两行（中文主 + 西语辅）不截断 */
.el-table th.el-table__cell {
  height: var(--h-table-head);
  padding: var(--sp-3) 0;
  background-color: var(--table-head-bg);
  border-bottom: 1px solid var(--border-1);
  color: var(--text-2);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  line-height: 1.35;
}
/* 表头允许换行：show-overflow-tooltip 默认 nowrap，会让双语标题被省略号截断 */
.el-table th.el-table__cell .cell.el-tooltip {
  white-space: normal;
  word-break: break-word;
}
/* 西语副行钩子（供后续批次把 <span class="th-cn"> 放进表头时生效） */
.el-table th .cell .th-cn {
  display: block;
  font-size: var(--fs-11);
  font-weight: var(--fw-regular);
  color: var(--text-3);
  line-height: var(--lh-11);
}

/* 4.3 单元格：水平留白沿用 EP 的 .cell 12px，这里只压垂直节奏 */
.el-table td.el-table__cell {
  height: var(--h-row);
  padding: var(--sp-4) 0;
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  color: var(--text-1);
}
.el-table .cell {
  font-size: var(--fs-13);
  line-height: var(--lh-13);
}
/* 复合列（多行内容 / 多按钮）最小高度目标 64px；不设 max-height，
   避免上传进度块出现时被裁切（见 §5.3 风险：编辑页整页消失的同类坑） */
.el-table .cell-composite {
  min-height: var(--h-row-composite);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}

/* 4.4 斑马纹关闭（方案要求关闭；页面当前没有 stripe，此处兜底） */
.el-table--striped .el-table__row--striped td.el-table__cell,
.el-table .el-table__row--striped td.el-table__cell {
  background-color: transparent;
}

/* 4.5 行悬停（统一 #F5F9FF；固定列单元格跟随） */
.el-table tbody tr:hover > td.el-table__cell {
  background-color: var(--row-hover-bg);
}

/* 4.6 首末列与固定列
   - 末列（操作列）右侧留 8px，避免固定列按钮贴边
   - 固定列投射阴影：同时兼容 EP 2.2+ 的 sticky 实现与旧版 .el-table__fixed 包装层 */
.el-table th.el-table__cell:last-child > .cell,
.el-table td.el-table__cell:last-child > .cell {
  padding-right: var(--sp-4);
}
.el-table th.el-table__cell:first-child > .cell,
.el-table td.el-table__cell:first-child > .cell {
  padding-left: var(--sp-5);
}
.el-table .el-table-fixed-column--left {
  box-shadow: var(--shadow-col-left);
}
.el-table .el-table-fixed-column--right {
  box-shadow: var(--shadow-col-right);
}
.el-table__fixed-right {
  box-shadow: var(--shadow-col-right);
}
.el-table__fixed {
  box-shadow: var(--shadow-col-left);
}
.el-table__fixed::before,
.el-table__fixed-right::before {
  display: none;
}

/* 4.7 滚动策略：横向滚动条常显 8px；表头滚动条隐藏以免占掉表头高度 */
.el-table .el-scrollbar__bar.is-horizontal {
  height: 8px;
  opacity: 1;
}
.el-table .el-scrollbar__bar.is-horizontal > div {
  background-color: var(--border-strong);
  border-radius: var(--r-pill);
}
.el-table .el-scrollbar__bar.is-horizontal > div:hover {
  background-color: var(--n-400);
}
.el-table__header-wrapper .el-scrollbar__bar {
  display: none;
}
.el-table__body-wrapper {
  scrollbar-width: thin;
}

/* 4.8 空态（无数据 / 无结果） */
.el-table__empty-block {
  min-height: 120px;
}
.el-table__empty-text {
  /* 空态是「需要读的提示」，不停留在次要灰：--text-3 实测 3.11:1，改 --text-2 达 5.6:1 */
  color: var(--text-2);
  font-size: var(--fs-13);
  line-height: var(--lh-14);
}

/* ==========================================================================
   §5 表单（方案 §3.6）
   ========================================================================== */
.el-form-item__label {
  font-size: var(--fs-13);
  color: var(--text-2);
  font-weight: var(--fw-medium);
  line-height: 1.45;
  padding-right: var(--sp-5);
}

/* 必填星号（EP 默认 *#F56C6C，这里换 danger-500） */
.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before,
.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label::before {
  content: "*";
  color: var(--danger-500);
  margin-right: 2px;
}

/* 校验失败：边框 + 提示文案 */
.el-form-item.is-error .el-input__wrapper,
.el-form-item.is-error .el-textarea__inner {
  box-shadow: 0 0 0 1px var(--danger-500) inset;
}
.el-form-item__error {
  font-size: var(--fs-12);
  color: var(--danger-600);
  padding-top: var(--sp-1);
}

/* 输入类控件：统一 4px 圆角 + 1px 边框 */
.el-input__wrapper,
.el-textarea__inner,
.el-select__wrapper {
  border-radius: var(--r-base);
  box-shadow: 0 0 0 1px var(--border-1) inset;
}
.el-input__wrapper.is-focus,
.el-textarea__inner:focus,
.el-select__wrapper.is-focused {
  box-shadow: 0 0 0 1px var(--brand-500) inset;
}
.el-input__inner,
.el-textarea__inner {
  font-size: var(--fs-14);
  color: var(--text-1);
}
.el-input__inner::placeholder,
.el-textarea__inner::placeholder {
  /* 与 --el-text-color-placeholder（select 占位）取同一档：#6B7684 / 白底 4.62:1，
     旧值 --text-4 (#B4BCC6) 只有 1.92:1，同一筛选行里 input 与 select 占位深浅不齐。 */
  color: var(--n-500);
}
/* 只读 / 禁用：保持可读（方案 §3.6 / C-06 方向） */
.el-input.is-disabled .el-input__inner,
.el-textarea.is-disabled .el-textarea__inner {
  color: var(--text-3);
}

/* 筛选条（:inline="true"）密度：一次筛选一行更紧凑 */
.el-form--inline .el-form-item {
  margin-right: var(--sp-5);
  margin-bottom: var(--sp-4);
}
.el-form--inline .el-form-item__label {
  padding-right: var(--sp-4);
}

/* ==========================================================================
   §6 按钮层级（方案 §3.7）
   Primary   实心 brand-600 / 白字
   Secondary 白底 1px 描边 / text-1（.el-button 无 type）
   Success   降级为品牌描边（绿只留给状态标签与进度，不做普通按钮）
   Danger    描边 danger（实心仅留给确认弹窗）    文本按钮保留 is-text / is-link
   ========================================================================== */
.el-button {
  border-radius: var(--r-base);
  font-weight: var(--fw-medium);
}
.el-button:not(.is-text):not(.is-link) {
  height: 32px;
}
.el-button--large:not(.is-text):not(.is-link) {
  height: 40px;
}
.el-button--small:not(.is-text):not(.is-link) {
  height: 28px;
  border-radius: var(--r-base);
}

/* 6.1 Primary —— 实心主色 */
.el-button--primary:not(.is-text):not(.is-link):not(.is-plain) {
  --el-button-text-color: var(--text-inverse);
  --el-button-bg-color: var(--brand-600);
  --el-button-border-color: var(--brand-600);
  --el-button-hover-text-color: var(--text-inverse);
  --el-button-hover-bg-color: var(--brand-500);
  --el-button-hover-border-color: var(--brand-500);
  --el-button-active-text-color: var(--text-inverse);
  --el-button-active-bg-color: var(--brand-700);
  --el-button-active-border-color: var(--brand-700);
  --el-button-disabled-text-color: var(--text-inverse);
  --el-button-disabled-bg-color: var(--brand-300);
  --el-button-disabled-border-color: var(--brand-300);
}

/* 6.2 Secondary —— 白底描边 */
.el-button--default:not(.is-text):not(.is-link):not(.is-plain) {
  --el-button-text-color: var(--text-1);
  --el-button-bg-color: var(--n-0);
  --el-button-border-color: var(--border-1);
  --el-button-hover-text-color: var(--brand-600);
  --el-button-hover-bg-color: var(--brand-50);
  --el-button-hover-border-color: var(--brand-300);
  --el-button-active-text-color: var(--brand-700);
  --el-button-active-bg-color: var(--brand-100);
  --el-button-active-border-color: var(--brand-400);
  --el-button-disabled-text-color: var(--text-4);
  --el-button-disabled-bg-color: var(--n-25);
  --el-button-disabled-border-color: var(--border-2);
}

/* 6.3 Success —— 不做普通按钮：降级为品牌描边（编辑 / 查看 / 下载 / 上传 / 替换） */
.el-button--success:not(.is-text):not(.is-link):not(.is-plain) {
  --el-button-text-color: var(--brand-600);
  --el-button-bg-color: var(--n-0);
  --el-button-border-color: var(--brand-200);
  --el-button-hover-text-color: var(--brand-700);
  --el-button-hover-bg-color: var(--brand-50);
  --el-button-hover-border-color: var(--brand-300);
  --el-button-active-text-color: var(--brand-700);
  --el-button-active-bg-color: var(--brand-100);
  --el-button-active-border-color: var(--brand-400);
  --el-button-disabled-text-color: var(--text-4);
  --el-button-disabled-bg-color: var(--n-25);
  --el-button-disabled-border-color: var(--border-1);
}

/* 6.4 Danger —— 描边（实心只用于确认弹窗，弹窗主按钮是 primary，不受影响） */
.el-button--danger:not(.is-text):not(.is-link):not(.is-plain) {
  --el-button-text-color: var(--danger-600);
  --el-button-bg-color: var(--n-0);
  --el-button-border-color: var(--danger-200);
  --el-button-hover-text-color: var(--danger-600);
  --el-button-hover-bg-color: var(--danger-50);
  --el-button-hover-border-color: var(--danger-500);
  --el-button-active-text-color: var(--danger-600);
  --el-button-active-bg-color: var(--danger-50);
  --el-button-active-border-color: var(--danger-500);
  --el-button-disabled-text-color: var(--text-4);
  --el-button-disabled-bg-color: var(--n-25);
  --el-button-disabled-border-color: var(--border-1);
}

/* 6.5 Warning —— 同上，描边告警 */
.el-button--warning:not(.is-text):not(.is-link):not(.is-plain) {
  --el-button-text-color: var(--warning-600);
  --el-button-bg-color: var(--n-0);
  --el-button-border-color: var(--warning-200);
  --el-button-hover-text-color: var(--warning-600);
  --el-button-hover-bg-color: var(--warning-50);
  --el-button-hover-border-color: var(--warning-500);
  --el-button-active-text-color: var(--warning-600);
  --el-button-active-bg-color: var(--warning-50);
  --el-button-active-border-color: var(--warning-500);
  --el-button-disabled-text-color: var(--text-4);
  --el-button-disabled-bg-color: var(--n-25);
  --el-button-disabled-border-color: var(--border-1);
}

/* 6.6 文本 / 链接按钮 */
.el-button.is-text {
  color: var(--color-primary);
  padding-left: var(--sp-2);
  padding-right: var(--sp-2);
}
.el-button.is-text:hover {
  color: var(--brand-700);
  background-color: var(--brand-50);
}
.el-button.is-text.el-button--danger {
  color: var(--danger-600);
}
.el-button.is-text.el-button--danger:hover {
  color: var(--danger-600);
  background-color: var(--danger-50);
}
.el-button.is-link {
  color: var(--color-primary);
}
.el-button.is-link.el-button--danger {
  color: var(--danger-600);
}

/* 6.7 表格内按钮：28px（方案 §3.7「表格内 28」） */
.el-table .el-button:not(.is-text):not(.is-link) {
  height: 28px;
  padding-left: var(--sp-5);
  padding-right: var(--sp-5);
}
.el-table .el-button + .el-button {
  margin-left: var(--sp-3);
}

/* 6.8 图标按钮 24px */
.el-button.is-circle,
.el-button.is-round.el-button--small {
  min-width: 24px;
  padding: 0;
}

/* ==========================================================================
   §7 标签 / 徽标 / 进度（方案 §3.8）
   ========================================================================== */
/* 7.1 色板：状态标签一律浅底 + 200 描边 + 600 文字 */
.el-tag {
  --el-tag-border-radius: var(--r-sm);
  border-radius: var(--r-sm);
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
}
.el-tag--success {
  --el-tag-bg-color: var(--success-50);
  --el-tag-border-color: var(--success-200);
  --el-tag-text-color: var(--success-600);
  background-color: var(--success-50);
  border-color: var(--success-200);
  color: var(--success-600);
}
.el-tag--warning {
  --el-tag-bg-color: var(--warning-50);
  --el-tag-border-color: var(--warning-200);
  --el-tag-text-color: var(--warning-600);
  background-color: var(--warning-50);
  border-color: var(--warning-200);
  color: var(--warning-600);
}
.el-tag--danger {
  --el-tag-bg-color: var(--danger-50);
  --el-tag-border-color: var(--danger-200);
  --el-tag-text-color: var(--danger-600);
  background-color: var(--danger-50);
  border-color: var(--danger-200);
  color: var(--danger-600);
}
.el-tag--info {
  --el-tag-bg-color: var(--info-50);
  --el-tag-border-color: var(--info-200);
  --el-tag-text-color: var(--info-600);
  background-color: var(--info-50);
  border-color: var(--info-200);
  color: var(--info-600);
}

/* 7.2 表格内标签：20px 高，密集排列（只作用于表格，避免影响 select 内的 tag） */
.el-table .el-tag {
  height: 20px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-12);
  line-height: 18px;
}
/* 业务 chip（客户名等无类型标签）：中性底 + text-2 字 */
.el-table .el-tag:not(.el-tag--success):not(.el-tag--warning):not(.el-tag--danger):not(.el-tag--info):not(.el-tag--primary) {
  --el-tag-bg-color: var(--n-100);
  --el-tag-border-color: var(--n-200);
  --el-tag-text-color: var(--text-2);
  background-color: var(--n-100);
  border-color: var(--n-200);
  color: var(--text-2);
}

/* 7.3 进度条：统一轨道色与圆角（行内 stroke-width 由模板给定，不改） */
.el-progress-bar__outer {
  background-color: var(--n-100);
  border-radius: var(--r-pill);
}
.el-progress-bar__inner {
  border-radius: var(--r-pill);
}

/* 7.4 行内上传 / 下载进度块（列表页 .row-prog 系列，模板类名，仅调色） */
.el-table .row-prog {
  border-top-color: var(--border-1);
}
.el-table .row-prog-title {
  color: var(--text-2);
}
.el-table .row-prog-meta {
  color: var(--text-3);
}

/* ==========================================================================
   §8 分页 / 分隔线 / 弹层 / 空态（方案 §3.9）
   ========================================================================== */
/* 8.1 分页：28px 方块 + 品牌态选中 */
.el-pagination {
  --el-pagination-font-size: var(--fs-13);
  --el-pagination-button-color: var(--text-2);
  --el-pagination-hover-color: var(--color-primary);
  --el-pagination-bg-color: transparent;
  font-size: var(--fs-13);
}
.el-pagination .el-pager li {
  min-width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: var(--r-base);
  font-weight: var(--fw-regular);
  color: var(--text-2);
}
.el-pagination .el-pager li.is-active {
  background-color: var(--brand-50);
  color: var(--brand-600);
  font-weight: var(--fw-semibold);
}
.el-pagination button.btn-prev,
.el-pagination button.btn-next {
  min-width: 28px;
  height: 28px;
}

/* 8.1.1 分页条（共享组件 js/pager-bar.js）：7 个列表页共用
   总数贴左，[每页条数][翻页][跳页] 贴右。
   每页条数不再走 EP 的 sizes 布局（它的 option 文案固定为 value + 后缀，会把
   'Todas' 挤成 2147483647），改由组件自己的 el-select 渲染，故本段按新结构写。 */
.pager-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  min-width: 0;
  max-width: 100%;
  margin-top: 16px;
}
.pager-bar__total {
  color: var(--text-3);
  font-size: var(--fs-12);
  white-space: nowrap;
}
.pager-bar__spacer {
  flex: 1 1 auto;
}
.pager-bar__sizes {
  flex: 0 0 132px;
  width: 132px;
}
.pager-bar__pagination {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  row-gap: var(--sp-2);
}
.pager-bar .el-pagination__jump {
  color: var(--text-3);
  font-size: var(--fs-12);
}
@media (max-width: 767px) {
  /* 窄屏：总数一行，控件换到下一行（EP 分页自身 flex-wrap，不会溢出） */
  .pager-bar__spacer { display: none; }
  .pager-bar__sizes { flex: 0 0 120px; width: 120px; }
  .pager-bar__pagination { flex: 1 1 100%; justify-content: flex-end; }
}

/* 8.2 分隔线：页头与内容之间收紧一点，给表格让出行高 */
.el-divider--horizontal {
  margin: var(--sp-5) 0;
  border-top-color: var(--border-2);
}

/* 8.3 弹层 */
.el-dialog {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.el-dialog__title {
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
}
.el-message-box {
  border-radius: var(--r-lg);
}
.el-message {
  border-radius: var(--r-base);
  box-shadow: var(--shadow-md);
}
/* 提示条正文对比度：Element Plus 默认 success 文字 #67C23A 只有 3.12:1（p9 截图 lint 报出），
   改用语义令牌的深色变体，正文稳定 ≥4.5:1；四个语义色一一对应，不新增颜色值。 */
.el-message .el-message__content {
  color: var(--text-1);
}
.el-message--success .el-message__content {
  color: var(--success-600);
}
.el-message--warning .el-message__content {
  color: var(--warning-600);
}
.el-message--error .el-message__content {
  color: var(--danger-600);
}
.el-message--info .el-message__content {
  color: var(--info-600);
}

/* 8.4 加载遮罩 */
.el-loading-mask {
  background-color: rgba(255, 255, 255, .72);
}

/* ==========================================================================
   §9 页面骨架与页级作用域（方案 附录 A + §4.4 / §4.5）
   每页根元素额外挂了唯一类（.page-xxx），页面特例一律写在下面并按页限定。
   15 页显式枚举，刻意不使用通配，避免新增页面被动继承。
   ========================================================================== */
/* 9.1 页面根：盒模型统一 */
.page-login,
.page-nav,
.page-order-list,
.page-surplus-list,
.page-inquiry-list,
.page-prodtrack-list,
.page-quotation-list,
.page-bill-list,
.page-orderback-list,
.page-order-edit,
.page-surplus-edit,
.page-quotation-edit,
.page-prodtrack-edit,
.page-bill-edit,
.page-orderback-edit {
  box-sizing: border-box;
}

/* 9.2 列表页外壳：16px 页边距（原 20px），给表格多让出 8px 宽度 */
.page-order-list,
.page-surplus-list,
.page-inquiry-list,
.page-prodtrack-list,
.page-quotation-list,
.page-bill-list,
.page-orderback-list {
  padding: var(--sp-6);
}

/* 9.3 编辑页外壳 */
.page-order-edit,
.page-surplus-edit,
.page-quotation-edit,
.page-prodtrack-edit,
.page-bill-edit,
.page-orderback-edit {
  padding: var(--sp-6);
  box-sizing: border-box;
}

/* 9.4 编辑页卡片与分区标题：颜色/圆角/阴影换成 tokens（尺寸不动） */
.page-order-edit .form-card,
.page-surplus-edit .form-card,
.page-quotation-edit .form-card,
.page-prodtrack-edit .form-card,
.page-bill-edit .form-card,
.page-orderback-edit .form-card {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-base);
}
.page-order-edit .section-title,
.page-surplus-edit .section-title,
.page-quotation-edit .section-title,
.page-prodtrack-edit .section-title,
.page-bill-edit .section-title,
.page-orderback-edit .section-title {
  font-size: var(--fs-18);
  line-height: var(--lh-18);
  color: var(--text-1);
  border-left-color: var(--brand-600);
}
.page-order-edit .section-title span,
.page-surplus-edit .section-title span,
.page-quotation-edit .section-title span,
.page-prodtrack-edit .section-title span,
.page-bill-edit .section-title span,
.page-orderback-edit .section-title span {
  color: var(--text-3);
  font-size: var(--fs-14);
}

/* 9.5 编辑页上传卡片 / 图片槽 */
.page-order-edit .upload-item,
.page-surplus-edit .upload-item,
.page-quotation-edit .upload-item,
.page-prodtrack-edit .upload-item,
.page-bill-edit .upload-item,
.page-orderback-edit .upload-item {
  border-color: var(--border-strong);
  border-radius: var(--r-md);
  background-color: var(--n-25);
}
.page-order-edit .upload-item .prog-box,
.page-surplus-edit .upload-item .prog-box,
.page-quotation-edit .upload-item .prog-box,
.page-prodtrack-edit .upload-item .prog-box,
.page-bill-edit .upload-item .prog-box,
.page-orderback-edit .upload-item .prog-box {
  border-top-color: var(--border-1);
}
.page-order-edit .image-slot,
.page-surplus-edit .image-slot,
.page-quotation-edit .image-slot,
.page-prodtrack-edit .image-slot,
.page-bill-edit .image-slot {
  border-radius: var(--r-md);
  background-color: var(--n-25);
}
.page-order-edit .image-slot:hover,
.page-surplus-edit .image-slot:hover,
.page-quotation-edit .image-slot:hover,
.page-prodtrack-edit .image-slot:hover,
.page-bill-edit .image-slot:hover {
  border-color: var(--brand-400);
}
.page-order-edit .image-slot .img-action-btn:hover,
.page-surplus-edit .image-slot .img-action-btn:hover,
.page-quotation-edit .image-slot .img-action-btn:hover,
.page-prodtrack-edit .image-slot .img-action-btn:hover,
.page-bill-edit .image-slot .img-action-btn:hover {
  background-color: var(--brand-50);
  color: var(--brand-600);
}

/* 9.6 登录页（方案 §4.4：≥1024 双栏——左品牌区 480 + 右表单卡 400；<1024 堆叠）
   本页的备案 footer 是 #app 的兄弟节点、在页根类作用域之外，所以「整页纵向弹性」
   必须挂到 body.page-login 上，footer 才会落在页面最底而不是悬浮半空；
   footer 自身样式见 §9.10。 */
body.page-login {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--n-50);
}
.page-login {
  background-color: var(--n-50);
}
.page-login.login-shell {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
}

/* 9.6.1 左品牌区（480px）：文字标志 + 中文主标 + 西语副标 + 一句价值主张（浅色几何底） */
.page-login .login-brand {
  position: relative;
  overflow: hidden;
  flex: 0 0 480px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-6);
  padding: var(--sp-11) var(--sp-10);
  background-color: var(--brand-50);
  background-image:
    radial-gradient(circle at 16% 18%, var(--brand-100) 0, rgba(255, 255, 255, 0) 46%),
    radial-gradient(circle at 84% 82%, var(--brand-200) 0, rgba(255, 255, 255, 0) 42%),
    linear-gradient(145deg, var(--n-0) 0%, var(--brand-50) 100%);
}
.page-login .login-brand__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  letter-spacing: .08em;
  color: var(--brand-700);
}
.page-login .login-brand__mark::before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: var(--r-md);
  background-color: var(--brand-600);
}
.page-login .login-brand__title {
  margin: 0;
  font-size: var(--fs-30);
  line-height: var(--lh-30);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-tight);
  color: var(--text-1);
}
.page-login .login-brand__cn {
  margin: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  color: var(--text-3);
}
.page-login .login-brand__tag {
  margin: 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--brand-200);
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  color: var(--text-2);
}

/* 9.6.2 右侧表单区 + 表单卡（400px / --r-xl / --shadow-lg / padding --sp-9） */
.page-login .login-panel {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-9) var(--sp-8);
}
.page-login .login-card {
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  padding: var(--sp-9);
  background-color: var(--n-0);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.page-login .login-title {
  margin-bottom: var(--sp-7);
  font-size: var(--fs-20);
  line-height: var(--lh-20);
  font-weight: var(--fw-semibold);
  text-align: center;
  color: var(--text-1);
}
.page-login .login-title span {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  font-weight: var(--fw-regular);
  color: var(--text-3);
}

/* 9.6.3 字段级错误 + 登录失败横幅 + 底部帮助行
   字段错误用 el-form-item 的 :error 就地显示；登录失败原因走 .login-error 横幅，
   两者都不替代原有的 ElMessage 兜底。 */
.page-login .login-form .el-form-item {
  margin-bottom: var(--sp-6);
}
.page-login .login-form .el-form-item__label {
  padding-bottom: var(--sp-2);
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  color: var(--text-2);
}
.page-login .login-form .el-form-item__error {
  /* EP 默认 position:absolute（top:100%），会压住下一个字段的 label；
     登录页字段少，改为文档流内显示，错误出现时把内容往下推而不是叠字。 */
  position: static;
  padding-top: var(--sp-2);
  font-size: var(--fs-12);
  line-height: var(--lh-12);
}
.page-login .login-submit {
  width: 100%;
  height: 40px;
}
.page-login .login-error {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  color: var(--danger-600);
  background-color: var(--danger-50);
  border: 1px solid var(--danger-200);
  border-radius: var(--r-base);
}
.page-login .login-help {
  margin: var(--sp-6) 0 0;
  text-align: center;
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  color: var(--text-3);
}

/* 9.7 导航页（方案 §4.3：同级 7 张功能卡 / 中文主标 + 西语副标 / 每卡能力标注）
   同 §9.6：footer 在页根之外，整页纵向弹性挂 body.page-nav，footer 样式见 §9.10。 */
body.page-nav {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--n-50);
}
.page-nav.page-nav-shell {
  flex: 1 1 auto;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: var(--sp-8);
}
.page-nav .nav-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border-1);
}
.page-nav .nav-head__title {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-4);
  font-size: var(--fs-20);
  line-height: var(--lh-20);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-tight);
  color: var(--text-1);
}
.page-nav .nav-head__cn {
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  font-weight: var(--fw-regular);
  color: var(--text-3);
}
.page-nav .nav-head__user {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-14);
  color: var(--text-2);
}
.page-nav .nav-head__name {
  font-weight: var(--fw-medium);
  color: var(--text-1);
}

/* 9.7.1 功能卡网格：同级 7 卡，240px 起自适应 */
.page-nav .nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.page-nav .nav-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  box-sizing: border-box;
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  background-color: var(--n-0);
  border: 1px solid var(--border-1);
  /* 左侧 4px 色条按功能族区分（方案 §4.3：不再 7 张全蓝） */
  border-left: 4px solid var(--brand-600);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.page-nav .nav-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.page-nav .nav-card:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 2px;
}
.page-nav .nav-card--brand {
  border-left-color: var(--brand-600);
}
.page-nav .nav-card--info {
  border-left-color: var(--info-500);
}
.page-nav .nav-card--success {
  border-left-color: var(--success-500);
}
.page-nav .nav-card--neutral {
  border-left-color: var(--n-300);
}
.page-nav .nav-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background-color: var(--n-50);
  font-size: 20px;
  line-height: 1;
  color: var(--text-2);
}
/* 内联 SVG 图标精灵（方案 §4.3：不引依赖、不用 emoji） */
.page-nav .nav-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.page-nav .nav-card__icon svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.page-nav .nav-card__title {
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
}
.page-nav .nav-card__sub {
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  color: var(--text-3);
}
.page-nav .nav-card__desc {
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  color: var(--text-2);
}
/* 能力标注：贴卡片底部，消除「进去才知道不能写」 */
.page-nav .nav-card__cap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin: auto 0 0;
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--border-2);
  font-size: var(--fs-11);
  line-height: var(--lh-11);
  color: var(--text-1);
}
.page-nav .nav-card__cap em {
  font-style: normal;
  color: var(--text-3);
}

/* 9.8 询价页特例（方案 §4.2 点名页：特例必须留在本页作用域内） */
.page-inquiry-list .tip-bar {
  margin: var(--sp-4) 0 var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  color: var(--warning-600);
  background-color: var(--warning-50);
  border: 1px solid var(--warning-200);
  border-radius: var(--r-base);
  font-size: var(--fs-13);
  line-height: var(--lh-14);
}
.page-inquiry-list .thumb {
  /* P15：缩略图 40 → 64px、圆角 4 → 6px（尺寸在页面 <style> 里，圆角在这里 —— 
     本条选择器权重高于页面里的 .thumb，写在页面里会被这里顶掉） */
  border-radius: var(--r-md);
  border-color: var(--border-2);
  background-color: var(--n-25);
}
.page-inquiry-list .thumb-ph {
  border-radius: var(--r-md);
  background-color: var(--n-50);
  color: var(--text-4);
}
.page-inquiry-list .no-img {
  color: var(--text-3);
}
/* P15：图片列升到第一列后，64px 缩略图 + 默认 8+8 内边距会把行顶到 81px。
   上下内边距收到 --sp-2 → 行高 72px，图片仍是行里最大的元素。 */
.page-inquiry-list .el-table td.cell-thumbs {
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
}

/* ==========================================================================
   9.9 编辑页统一表单骨架（方案 §4.5 编辑页 / §3.6 表单 / C-06 只读态）
   覆盖 6 个编辑页：order / surplus / quotation / prodtrack / bill / orderback。
   全部规则以 .page-*-edit 作用域前缀书写，禁止上提为全局选择器（§5.4 样式泄漏）。
   新增类名：page-head / page-title / page-title__cn / page-head__actions /
             section-note / upload-title / upload-sub / field-empty /
             action-bar / action-bar__btns。
   ========================================================================== */
/* 9.9.1 页头：标题（中文 + 西语）+ 返回/保存入口 */
.page-order-edit .page-head,
.page-surplus-edit .page-head,
.page-quotation-edit .page-head,
.page-prodtrack-edit .page-head,
.page-bill-edit .page-head,
.page-orderback-edit .page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.page-order-edit .page-title,
.page-surplus-edit .page-title,
.page-quotation-edit .page-title,
.page-prodtrack-edit .page-title,
.page-bill-edit .page-title,
.page-orderback-edit .page-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin: 0;
  font-size: var(--fs-20);
  line-height: var(--lh-20);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
  letter-spacing: var(--tr-tight);
}
.page-order-edit .page-title__cn,
.page-surplus-edit .page-title__cn,
.page-quotation-edit .page-title__cn,
.page-prodtrack-edit .page-title__cn,
.page-bill-edit .page-title__cn,
.page-orderback-edit .page-title__cn {
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  font-weight: var(--fw-regular);
  color: var(--text-2);
}
.page-order-edit .page-head__actions,
.page-surplus-edit .page-head__actions,
.page-quotation-edit .page-head__actions,
.page-prodtrack-edit .page-head__actions,
.page-bill-edit .page-head__actions,
.page-orderback-edit .page-head__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.page-order-edit .page-head__actions .el-button + .el-button,
.page-surplus-edit .page-head__actions .el-button + .el-button,
.page-quotation-edit .page-head__actions .el-button + .el-button,
.page-prodtrack-edit .page-head__actions .el-button + .el-button,
.page-bill-edit .page-head__actions .el-button + .el-button,
.page-orderback-edit .page-head__actions .el-button + .el-button {
  margin-left: 0;
}

/* 9.9.2 分组卡片与分组标题（间距/字号/圆角走 token；尺寸沿用 §9.4） */
.page-order-edit .form-card,
.page-surplus-edit .form-card,
.page-quotation-edit .form-card,
.page-prodtrack-edit .form-card,
.page-bill-edit .form-card,
.page-orderback-edit .form-card {
  padding: var(--sp-8) var(--sp-9);
  margin-bottom: var(--sp-6);
}
.page-order-edit .section-title,
.page-surplus-edit .section-title,
.page-quotation-edit .section-title,
.page-prodtrack-edit .section-title,
.page-bill-edit .section-title,
.page-orderback-edit .section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  font-weight: var(--fw-semibold);
}
/* 只读态权限说明（新增中/西双语并列文案，挂在分组标题右侧） */
.page-order-edit .section-title .section-note,
.page-surplus-edit .section-title .section-note,
.page-quotation-edit .section-title .section-note,
.page-prodtrack-edit .section-title .section-note,
.page-bill-edit .section-title .section-note,
.page-orderback-edit .section-title .section-note {
  margin-left: auto;
  padding: 2px var(--sp-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  background-color: var(--n-50);
  color: var(--text-2);
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  font-weight: var(--fw-regular);
}
/* 分组标题里的西语副标题：§9.4 用的是 text-3(2.89:1)，编辑页内提到 text-2 以满足对比度 */
.page-order-edit .section-title span,
.page-surplus-edit .section-title span,
.page-quotation-edit .section-title span,
.page-prodtrack-edit .section-title span,
.page-bill-edit .section-title span,
.page-orderback-edit .section-title span {
  color: var(--text-2);
}

/* 9.9.3 表单：label 顶部对齐 + 输入高 40 + 错误信息贴近字段 */
.page-order-edit,
.page-surplus-edit,
.page-quotation-edit,
.page-prodtrack-edit,
.page-bill-edit,
.page-orderback-edit {
  --el-component-size: 40px; /* 输入/下拉/日期统一 40px（按钮高度另由 §6 固定） */
}
.page-order-edit .el-form-item,
.page-surplus-edit .el-form-item,
.page-quotation-edit .el-form-item,
.page-prodtrack-edit .el-form-item,
.page-bill-edit .el-form-item,
.page-orderback-edit .el-form-item {
  margin-bottom: var(--sp-5);
}
.page-order-edit .el-form-item__label,
.page-surplus-edit .el-form-item__label,
.page-quotation-edit .el-form-item__label,
.page-prodtrack-edit .el-form-item__label,
.page-bill-edit .el-form-item__label,
.page-orderback-edit .el-form-item__label {
  padding: 0 0 var(--sp-2) 0;
  line-height: var(--lh-13);
}
.page-order-edit .el-input__wrapper,
.page-surplus-edit .el-input__wrapper,
.page-quotation-edit .el-input__wrapper,
.page-prodtrack-edit .el-input__wrapper,
.page-bill-edit .el-input__wrapper,
.page-orderback-edit .el-input__wrapper,
.page-order-edit .el-select__wrapper,
.page-surplus-edit .el-select__wrapper,
.page-quotation-edit .el-select__wrapper,
.page-prodtrack-edit .el-select__wrapper,
.page-bill-edit .el-select__wrapper,
.page-orderback-edit .el-select__wrapper {
  box-sizing: border-box;
  min-height: 40px;
}
/* 错误文案入流（默认 absolute 会压住下一个 label），贴近本字段 */
.page-order-edit .el-form-item__error,
.page-surplus-edit .el-form-item__error,
.page-quotation-edit .el-form-item__error,
.page-prodtrack-edit .el-form-item__error,
.page-bill-edit .el-form-item__error,
.page-orderback-edit .el-form-item__error {
  position: static;
  padding-top: var(--sp-2);
  line-height: var(--lh-12);
}

/* 9.9.4 只读态（C-06）：文字可选中复制，视觉不灰 */
.page-order-edit .field-ro .el-input__wrapper,
.page-surplus-edit .field-ro .el-input__wrapper,
.page-quotation-edit .field-ro .el-input__wrapper,
.page-prodtrack-edit .field-ro .el-input__wrapper,
.page-bill-edit .field-ro .el-input__wrapper,
.page-orderback-edit .field-ro .el-input__wrapper,
.page-order-edit .field-ro .el-textarea__inner,
.page-surplus-edit .field-ro .el-textarea__inner,
.page-quotation-edit .field-ro .el-textarea__inner,
.page-prodtrack-edit .field-ro .el-textarea__inner,
.page-bill-edit .field-ro .el-textarea__inner,
.page-orderback-edit .field-ro .el-textarea__inner {
  background-color: var(--n-25);
  box-shadow: 0 0 0 1px var(--border-2) inset;
  cursor: text;
}
.page-order-edit .field-ro .el-input__inner,
.page-surplus-edit .field-ro .el-input__inner,
.page-quotation-edit .field-ro .el-input__inner,
.page-prodtrack-edit .field-ro .el-input__inner,
.page-bill-edit .field-ro .el-input__inner,
.page-orderback-edit .field-ro .el-input__inner,
.page-order-edit .field-ro .el-textarea__inner,
.page-surplus-edit .field-ro .el-textarea__inner,
.page-quotation-edit .field-ro .el-textarea__inner,
.page-prodtrack-edit .field-ro .el-textarea__inner,
.page-bill-edit .field-ro .el-textarea__inner,
.page-orderback-edit .field-ro .el-textarea__inner {
  color: var(--text-1);
  -webkit-text-fill-color: var(--text-1);
  cursor: text;
  user-select: text;
}
/* 下拉/日期选择器 EP 无 readonly 语义（readonly 只作用于内部 input，面板仍可改值），
   保留 :disabled 以保证不可篡改，但把禁用灰底换成只读浅底 + 正常字色。 */
.page-order-edit .el-select.is-disabled .el-select__wrapper,
.page-surplus-edit .el-select.is-disabled .el-select__wrapper,
.page-quotation-edit .el-select.is-disabled .el-select__wrapper,
.page-prodtrack-edit .el-select.is-disabled .el-select__wrapper,
.page-bill-edit .el-select.is-disabled .el-select__wrapper,
.page-orderback-edit .el-select.is-disabled .el-select__wrapper,
.page-order-edit .el-date-editor.is-disabled .el-input__wrapper,
.page-surplus-edit .el-date-editor.is-disabled .el-input__wrapper,
.page-quotation-edit .el-date-editor.is-disabled .el-input__wrapper,
.page-prodtrack-edit .el-date-editor.is-disabled .el-input__wrapper,
.page-bill-edit .el-date-editor.is-disabled .el-input__wrapper,
.page-orderback-edit .el-date-editor.is-disabled .el-input__wrapper {
  background-color: var(--n-25);
  box-shadow: 0 0 0 1px var(--border-2) inset;
}
.page-order-edit .el-select.is-disabled .el-select__selected-item,
.page-surplus-edit .el-select.is-disabled .el-select__selected-item,
.page-quotation-edit .el-select.is-disabled .el-select__selected-item,
.page-prodtrack-edit .el-select.is-disabled .el-select__selected-item,
.page-bill-edit .el-select.is-disabled .el-select__selected-item,
.page-orderback-edit .el-select.is-disabled .el-select__selected-item,
.page-order-edit .el-date-editor.is-disabled .el-input__inner,
.page-surplus-edit .el-date-editor.is-disabled .el-input__inner,
.page-quotation-edit .el-date-editor.is-disabled .el-input__inner,
.page-prodtrack-edit .el-date-editor.is-disabled .el-input__inner,
.page-bill-edit .el-date-editor.is-disabled .el-input__inner,
.page-orderback-edit .el-date-editor.is-disabled .el-input__inner {
  color: var(--text-1);
  -webkit-text-fill-color: var(--text-1);
}

/* 9.9.5 上传卡与空值占位（统一字号/间距/空态表现，文案一字未改） */
.page-order-edit .upload-item .upload-title,
.page-surplus-edit .upload-item .upload-title,
.page-quotation-edit .upload-item .upload-title,
.page-prodtrack-edit .upload-item .upload-title,
.page-bill-edit .upload-item .upload-title,
.page-orderback-edit .upload-item .upload-title {
  font-size: var(--fs-15);
  line-height: var(--lh-15);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
  margin-bottom: var(--sp-2);
}
.page-order-edit .upload-item .upload-sub,
.page-surplus-edit .upload-item .upload-sub,
.page-quotation-edit .upload-item .upload-sub,
.page-prodtrack-edit .upload-item .upload-sub,
.page-bill-edit .upload-item .upload-sub,
.page-orderback-edit .upload-item .upload-sub {
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  color: var(--text-2);
  margin-bottom: var(--sp-4);
}
/* 进度条下方的体量/速率文案（§9.5 用的是 #909399，对比度 2.97:1 不够，编辑页内提到 text-2） */
.page-order-edit .upload-item .prog-meta,
.page-surplus-edit .upload-item .prog-meta,
.page-quotation-edit .upload-item .prog-meta,
.page-prodtrack-edit .upload-item .prog-meta,
.page-bill-edit .upload-item .prog-meta,
.page-orderback-edit .upload-item .prog-meta {
  color: var(--text-2);
}
.page-order-edit .field-empty,
.page-surplus-edit .field-empty,
.page-quotation-edit .field-empty,
.page-prodtrack-edit .field-empty,
.page-bill-edit .field-empty,
.page-orderback-edit .field-empty {
  color: var(--text-2);
  font-size: var(--fs-13);
  line-height: var(--lh-14);
}
/* 空值旁的一句说明（新增文案一律中/西并列） */
.page-order-edit .field-note,
.page-surplus-edit .field-note,
.page-quotation-edit .field-note,
.page-prodtrack-edit .field-note,
.page-bill-edit .field-note,
.page-orderback-edit .field-note {
  color: var(--text-2);
  font-size: var(--fs-12);
  line-height: var(--lh-13);
  margin-left: var(--sp-3);
}

/* 9.9.6 底部 sticky 操作条（滚动时可见，位于表单流末尾，不遮挡最后一个字段） */
.page-order-edit .action-bar,
.page-surplus-edit .action-bar,
.page-quotation-edit .action-bar,
.page-prodtrack-edit .action-bar,
.page-bill-edit .action-bar,
.page-orderback-edit .action-bar {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky-bar);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--h-actionbar);
  padding: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-6);
  background-color: var(--n-0);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sticky);
}
.page-order-edit .action-bar__btns,
.page-surplus-edit .action-bar__btns,
.page-quotation-edit .action-bar__btns,
.page-prodtrack-edit .action-bar__btns,
.page-bill-edit .action-bar__btns,
.page-orderback-edit .action-bar__btns {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.page-order-edit .action-bar .el-button + .el-button,
.page-surplus-edit .action-bar .el-button + .el-button,
.page-quotation-edit .action-bar .el-button + .el-button,
.page-prodtrack-edit .action-bar .el-button + .el-button,
.page-bill-edit .action-bar .el-button + .el-button,
.page-orderback-edit .action-bar .el-button + .el-button {
  margin-left: 0;
}
.page-order-edit .action-bar .el-button--large:not(.is-text):not(.is-link),
.page-surplus-edit .action-bar .el-button--large:not(.is-text):not(.is-link),
.page-quotation-edit .action-bar .el-button--large:not(.is-text):not(.is-link),
.page-prodtrack-edit .action-bar .el-button--large:not(.is-text):not(.is-link),
.page-bill-edit .action-bar .el-button--large:not(.is-text):not(.is-link),
.page-orderback-edit .action-bar .el-button--large:not(.is-text):not(.is-link) {
  height: 40px;
  min-width: 120px;
  padding: 0 var(--sp-7);
}

/* 9.9.7 编辑页窄屏：单列堆叠 + 操作条换行（§3.10「<1280 全单列，底部 sticky 保存条」） */
@media (max-width: 767px) {
  .page-order-edit .el-form .el-col,
  .page-surplus-edit .el-form .el-col,
  .page-quotation-edit .el-form .el-col,
  .page-prodtrack-edit .el-form .el-col,
  .page-bill-edit .el-form .el-col,
  .page-orderback-edit .el-form .el-col {
    max-width: 100%;
    flex: 0 0 100%;
  }
  .page-order-edit .page-head,
  .page-surplus-edit .page-head,
  .page-quotation-edit .page-head,
  .page-prodtrack-edit .page-head,
  .page-bill-edit .page-head,
  .page-orderback-edit .page-head {
    align-items: flex-start;
  }
  .page-order-edit .page-head__actions,
  .page-surplus-edit .page-head__actions,
  .page-quotation-edit .page-head__actions,
  .page-prodtrack-edit .page-head__actions,
  .page-bill-edit .page-head__actions,
  .page-orderback-edit .page-head__actions {
    width: 100%;
  }
  .page-order-edit .action-bar,
  .page-surplus-edit .action-bar,
  .page-quotation-edit .action-bar,
  .page-prodtrack-edit .action-bar,
  .page-bill-edit .action-bar,
  .page-orderback-edit .action-bar {
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding: var(--sp-4);
  }
  .page-order-edit .action-bar__btns,
  .page-surplus-edit .action-bar__btns,
  .page-quotation-edit .action-bar__btns,
  .page-prodtrack-edit .action-bar__btns,
  .page-bill-edit .action-bar__btns,
  .page-orderback-edit .action-bar__btns {
    width: 100%;
    margin-left: 0;
  }
  .page-order-edit .action-bar__btns .el-button,
  .page-surplus-edit .action-bar__btns .el-button,
  .page-quotation-edit .action-bar__btns .el-button,
  .page-prodtrack-edit .action-bar__btns .el-button,
  .page-bill-edit .action-bar__btns .el-button,
  .page-orderback-edit .action-bar__btns .el-button {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
  }
}

/* ==========================================================================
   9.10 备案 footer（方案 §4.0 末条：内容一字不改，样式集中到本文件）
   与其它页级规则的区别：footer 是 #app 的**兄弟节点**，落在页根类
   (.page-xxx) 作用域之外，因此用独立类 .app-footer 承接，15 页共用同一套规则。
   合规内容（备案号文字 / href / target / rel / 图标 alt）全部保持原样。
   ========================================================================== */
.app-footer {
  box-sizing: border-box;
  padding: var(--sp-7) 0;
  border-top: 1px solid var(--border-2);
  text-align: center;
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  color: var(--text-3);
}
.app-footer__inner {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4) var(--sp-6);
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 var(--sp-6);
}
.app-footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--text-3);
  text-decoration: none;
  white-space: nowrap;
}
.app-footer__link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.app-footer__icon {
  display: block;
  height: 20px;
  width: auto;
}

/* ==========================================================================
   9.11 doc 模块列表页（prodtrack / quotation / bill / orderback / surplus-list）
   方案 §4.6：前 4 页由 js/doc-page.js 同一份 setup 驱动，模板片段完全一致，
   故规则一次性按页根类联合书写——仍然逐页限定，禁止上提为全局选择器（§5.4）。
   P3 收尾批次把 .page-surplus-list 并入各组：余货列表用的是自带 setup（进度块调用的是局部函数，
   不是 docListSetup 的那一套），但复合单元的类名与规格和这 4 页完全一致，
   所以只加一个页根类来复用本段规则，不复制整段 CSS（复制会让 44/64 行高出现两份真相）。
   复合列目标高度：无文件 44px（--h-row）/ 有文件 64px（--h-row-composite）；
   单元格内只有「文件短名 · 状态 chip · 文字按钮」两行，不再出现实心大按钮各占一行。
   类名沿用 order-list 样板（docs-cell/doc-chip 的单文件版）：doc-cell / doc-line /
   doc-name / doc-acts / ops-cell，只在本段定义，避免与样板页的 .page-order-list 规则互相覆盖。
   ========================================================================== */
/* 9.11.1 单元格垂直节奏交给 .doc-cell 自己，td 不再叠 8+8 padding（行高才能落在 44/64） */
.page-order-list .el-table td.cell-doc,
.page-prodtrack-list .el-table td.cell-doc,
.page-quotation-list .el-table td.cell-doc,
.page-bill-list .el-table td.cell-doc,
.page-orderback-list .el-table td.cell-doc,
.page-surplus-list .el-table td.cell-doc {
  padding-top: 0;
  padding-bottom: 0;
}

/* 9.11.2 复合单元格外壳：无文件 → 44px；有文件（.is-done）→ 62px（P15：文件列升第一列后
   行高按「有文件 62~64 / 无文件 44~46」分档，62 + 1px 边框 = 表格行 63px）。
   不设 max-height：上传进度块出现时行高允许继续增长，避免进度条被裁切（§7.4 / §5.4）。 */
.page-order-list .el-table .doc-cell,
.page-prodtrack-list .el-table .doc-cell,
.page-quotation-list .el-table .doc-cell,
.page-bill-list .el-table .doc-cell,
.page-orderback-list .el-table .doc-cell,
.page-surplus-list .el-table .doc-cell {
  min-height: var(--h-row);
  gap: var(--sp-1);
  width: 100%;
}
.page-order-list .el-table .doc-cell.is-done,
.page-prodtrack-list .el-table .doc-cell.is-done,
.page-quotation-list .el-table .doc-cell.is-done,
.page-bill-list .el-table .doc-cell.is-done,
.page-orderback-list .el-table .doc-cell.is-done,
.page-surplus-list .el-table .doc-cell.is-done {
  min-height: 62px;
}

/* 9.11.3 第一行：文件名 + 状态 chip（chip 尺寸沿用 §7.2 的表格内 20px 标签；
   P15：文件名升到 13px / 600 / 主文字色 —— 文件是第一眼落点，不再是附件说明的小灰字） */
.page-order-list .el-table .doc-line,
.page-prodtrack-list .el-table .doc-line,
.page-quotation-list .el-table .doc-line,
.page-bill-list .el-table .doc-line,
.page-orderback-list .el-table .doc-line,
.page-surplus-list .el-table .doc-line {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 22px;
}
.page-order-list .el-table .doc-name,
.page-prodtrack-list .el-table .doc-name,
.page-quotation-list .el-table .doc-name,
.page-bill-list .el-table .doc-name,
.page-orderback-list .el-table .doc-name,
.page-surplus-list .el-table .doc-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-13);
  color: var(--text-1);
}
.page-order-list .el-table .doc-line .el-tag,
.page-prodtrack-list .el-table .doc-line .el-tag,
.page-quotation-list .el-table .doc-line .el-tag,
.page-bill-list .el-table .doc-line .el-tag,
.page-orderback-list .el-table .doc-line .el-tag,
.page-surplus-list .el-table .doc-line .el-tag {
  flex: 0 0 auto;
}

/* 9.11.3b 文件名直接预览（票 12）：.doc-name 由 <span> 换成 <button> —— 用原生按钮做可点区域，
   键盘 Tab / Enter 天然可用，读屏也认得出「按钮」，不必再手写 role + keydown。
   按钮自带的边框 / 内边距 / 字体一律归零，字号行高继续由上面的 .doc-name 规则提供；
   按钮作为 flex item 会被块化成块盒，故 text-overflow:ellipsis 与 white-space:nowrap 照旧生效，
   .doc-line 的 20px 行高不涨（44/64 目标不变）。
   未上传时模板给 disabled：这里顺手收掉手型，避免「看着能点、点了没反应」。
   Descargar / Reemplazar / ⋯ 三处按钮不在本段作用范围内，尺寸与点击行为一字未改。 */
.page-order-list .el-table .doc-name,
.page-prodtrack-list .el-table .doc-name,
.page-quotation-list .el-table .doc-name,
.page-bill-list .el-table .doc-name,
.page-orderback-list .el-table .doc-name,
.page-surplus-list .el-table .doc-name {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
}
.page-order-list .el-table .doc-name:not(:disabled),
.page-prodtrack-list .el-table .doc-name:not(:disabled),
.page-quotation-list .el-table .doc-name:not(:disabled),
.page-bill-list .el-table .doc-name:not(:disabled),
.page-orderback-list .el-table .doc-name:not(:disabled),
.page-surplus-list .el-table .doc-name:not(:disabled) {
  cursor: pointer;
}
.page-order-list .el-table .doc-name:not(:disabled):hover,
.page-prodtrack-list .el-table .doc-name:not(:disabled):hover,
.page-quotation-list .el-table .doc-name:not(:disabled):hover,
.page-bill-list .el-table .doc-name:not(:disabled):hover,
.page-orderback-list .el-table .doc-name:not(:disabled):hover,
.page-surplus-list .el-table .doc-name:not(:disabled):hover {
  color: var(--brand-600);
  text-decoration: underline;
}
.page-order-list .el-table .doc-name:not(:disabled):focus-visible,
.page-prodtrack-list .el-table .doc-name:not(:disabled):focus-visible,
.page-quotation-list .el-table .doc-name:not(:disabled):focus-visible,
.page-bill-list .el-table .doc-name:not(:disabled):focus-visible,
.page-orderback-list .el-table .doc-name:not(:disabled):focus-visible,
.page-surplus-list .el-table .doc-name:not(:disabled):focus-visible {
  outline: none;
  color: var(--brand-600);
  text-decoration: underline;
}

/* 9.11.4 第二行：上传 / 下载 / 替换动作 —— 文字按钮 20px 高，一组只占一行 */
.page-order-list .el-table .doc-acts,
.page-prodtrack-list .el-table .doc-acts,
.page-quotation-list .el-table .doc-acts,
.page-bill-list .el-table .doc-acts,
.page-orderback-list .el-table .doc-acts,
.page-surplus-list .el-table .doc-acts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
}
.page-order-list .el-table .doc-acts .el-button,
.page-prodtrack-list .el-table .doc-acts .el-button,
.page-quotation-list .el-table .doc-acts .el-button,
.page-bill-list .el-table .doc-acts .el-button,
.page-orderback-list .el-table .doc-acts .el-button,
.page-surplus-list .el-table .doc-acts .el-button {
  height: 20px;
  padding: 0 var(--sp-2);
  font-size: var(--fs-12);
}
.page-order-list .el-table .doc-acts .el-button + .el-button,
.page-prodtrack-list .el-table .doc-acts .el-button + .el-button,
.page-quotation-list .el-table .doc-acts .el-button + .el-button,
.page-bill-list .el-table .doc-acts .el-button + .el-button,
.page-orderback-list .el-table .doc-acts .el-button + .el-button,
.page-surplus-list .el-table .doc-acts .el-button + .el-button {
  margin-left: 0;
}

/* 9.11.5 操作列（144px）：2 个文字按钮横排。
   与样板 order-list 的 .ops-cell（88px 竖排）不同：竖排的 2 个 24px 按钮 + 8+8 行内边距在实测中把
   无文件行顶到 67px（截图实测 tr=67，而规格要求 44），故本批改为横排，列宽取报告 §3.5
   「操作列 2 个动作 = 144px」，行高回到 44/64。 */
.page-prodtrack-list .ops-cell,
.page-quotation-list .ops-cell,
.page-bill-list .ops-cell,
.page-orderback-list .ops-cell,
.page-surplus-list .ops-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
}
.page-prodtrack-list .ops-cell .el-button + .el-button,
.page-quotation-list .ops-cell .el-button + .el-button,
.page-bill-list .ops-cell .el-button + .el-button,
.page-orderback-list .ops-cell .el-button + .el-button,
.page-surplus-list .ops-cell .el-button + .el-button {
  margin-left: 0;
}
/* 144px 内放得下「Editar / Eliminar」两个 13px 文字按钮：按钮内边距收到 4px、字号取 12（与 .doc-acts 同规格），
   否则实测按钮组溢出列宽、Eliminar 被表格右边缘裁掉 */
.page-prodtrack-list .ops-cell .el-button,
.page-quotation-list .ops-cell .el-button,
.page-bill-list .ops-cell .el-button,
.page-orderback-list .ops-cell .el-button,
.page-surplus-list .ops-cell .el-button {
  height: 24px;
  padding: 0 var(--sp-2);
  font-size: var(--fs-12);
}
/* 9.11.6 票 03 加第三颗「⋯」溢出菜单后，144px 里要放 Editar + Eliminar + ⋯ 三颗：
   三颗实测 47+60+20 + 两处 4px 间距 = 135px，而 td 默认左右各 12px 内边距只留出 120px，
   第三颗会顶到列右边缘被裁。操作列单元格左右内边距收到 --sp-2（4px）→ 可用 136px。
   只作用于 .ops-col（四个单据页的操作列 td），不碰表格其它列。 */
.page-order-list .el-table td.ops-col,
.page-prodtrack-list .el-table td.ops-col,
.page-quotation-list .el-table td.ops-col,
.page-bill-list .el-table td.ops-col,
.page-orderback-list .el-table td.ops-col {
  padding-left: var(--sp-2);
  padding-right: var(--sp-2);
}
/* 「⋯」这一颗只有 1 个字，横向内边距再收一档、间距回到 4px 网格最密档：
   三颗合计 133px，给 136px 可用宽留 3px 余量（不同系统字体度量下不会贴边）。 */
.page-prodtrack-list .ops-cell .ops-more__btn,
.page-quotation-list .ops-cell .ops-more__btn,
.page-bill-list .ops-cell .ops-more__btn,
.page-orderback-list .ops-cell .ops-more__btn,
.page-prodtrack-list .ops-cell,
.page-quotation-list .ops-cell,
.page-bill-list .ops-cell,
.page-orderback-list .ops-cell,
.page-surplus-list .ops-cell {
  gap: var(--sp-1);
}
.page-prodtrack-list .ops-cell .ops-more__btn,
.page-quotation-list .ops-cell .ops-more__btn,
.page-bill-list .ops-cell .ops-more__btn,
.page-orderback-list .ops-cell .ops-more__btn {
  padding-left: 1px;
  padding-right: 1px;
  min-width: 14px;
}

/* ==========================================================================
   9.11.7 order-list 单据 chip 拆成两颗按钮（票 12，与 9.11.3b 的 doc-name 直接预览同批）
   ---------------------------------------------------------------------
   改前：一颗 button 占满 150px 列，点哪儿都只开抽屉 —— 用户要先读「Factura / Subido」，
   再点 ›，再点抽屉里的「Vista previa」，看一份文件三步。
   改后：chip 外壳尺寸一字未改（18px 高、1px 边框、--r-sm 圆角，行高仍是 65/45）：
         左 = .doc-chip-main（已上传显示真实文件名，点一次 = previewFile 直开签名地址；
                              未上传 = 开抽屉去上传），
         右 = .doc-chip-go（那颗 › 仍开抽屉，管上传/替换/删除/进度 —— 抽屉内一切不变）。
   页内 <style>（order-list.html 的 .doc-chip 一组）先加载，本段后加载且选择器同权重，
   故这里只覆盖必需项：外壳的内边距 / 间距 / 手型让给内部两颗按钮。
   ========================================================================== */
.page-order-list .el-table .doc-chip {
  padding: 0;
  gap: 0;
  cursor: default;
}
.page-order-list .el-table .doc-chip-main {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 var(--sp-2);
  border: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: 1;
  text-align: left;
  cursor: pointer;
}
.page-order-list .el-table .doc-chip-main:hover .doc-chip-name {
  text-decoration: underline;
}
.page-order-list .el-table .doc-chip-main:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--brand-400);
}
/* 右侧 › 用竖分隔线跟主体分开：两个可点区域，读屏靠 aria-label 区分
   （主体 = Vista previa / Subir，这颗 = Abrir documentos 打开单据抽屉）。
   min-width 而非 width：上传中这颗位置显示的是「45%」字样，宽度要跟着跑到自然宽。 */
.page-order-list .el-table .doc-chip-go {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  padding: 0 2px;
  border: 0;
  border-left: 1px solid var(--border-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: transparent;
  color: var(--text-4);
  font-family: inherit;
  font-size: var(--fs-12);
  line-height: 1;
  cursor: pointer;
}
.page-order-list .el-table .doc-chip-go:hover {
  background-color: var(--brand-100);
  color: var(--brand-600);
}
.page-order-list .el-table .doc-chip-go:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--brand-400);
}
/* 上传中：› 换成百分比进度（原行为），不是按钮，收掉手型与 hover 反馈 */
.page-order-list .el-table .doc-chip-go.is-busy {
  cursor: default;
  border-left-color: transparent;
}
.page-order-list .el-table .doc-chip-go.is-busy:hover {
  background: transparent;
  color: var(--brand-600);
}
/* 已上传时的状态位：一颗对勾取代「Subido」三个字，给 150px 列里的文件名多让出约 40px。
   状态不靠颜色单独承载（文件名本身 + 读屏 aria-label 都在），对勾只是视觉确认。 */
.page-order-list .el-table .doc-chip-state.is-done-icon {
  padding: 0 2px;
  min-width: 12px;
  text-align: center;
  background-color: transparent;
  color: var(--success-600);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
}

/* ==========================================================================
   9.12 surplus-list 余货列表页（P3 收尾批次）
   复合列 / 操作列的规格直接复用 §9.11（已把 .page-surplus-list 并入 §9.11 的各组选择器），
   本段只放余货页独有的一个点：客户列 chip 容器。列宽（余货清单 190 / 操作 88）由页面
   columns 配置决定，不在这里写死，避免 CSS 与 table-layout 保存的列宽打架。
   ========================================================================== */
/* 9.12.1 客户列 chip：中性底色、20px 高度、12px 字号均来自 §7.2 的「表格内 el-tag」规则，
   这里只负责折行与间距（chip 数量由 custNames 决定，容器要能容纳多行而不撑破 td）。
   width:100% 让折行按单元格实际宽度计算；gap 取 --sp-1（4px）保持 4px 网格。 */
.page-surplus-list .cust-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  width: 100%;
}
/* 间距只由 gap 控制：清掉 el-tag 自身外边距，避免和 gap 叠加成 8px */
.page-surplus-list .cust-cell .el-tag {
  margin: 0;
}

/* ==========================================================================
   9.13 列表工具条（方案 §3.7 / §4.2 / §4.7：导出与「表格布局」操作出筛选区 + tooltip 引导）
   ---------------------------------------------------------------------
   现象：inquiry-list / surplus-list 把「导出 / 保存样式 / 恢复默认」和查询按钮挤在同一个
        el-form-item 里，并靠一行 12px 常驻文字解释用法 —— §3.7「每区域 ≤1 个 primary」、
        §4.2 / §4.7「布局操作从筛选区移到工具条，说明改成 tooltip」都没落地。
   做法：一条与表格同宽的 flex 工具条：左侧放导出（只有 inquiry 有导出接口），右侧放布局操作；
        解释性文案改挂 el-tooltip，不再常驻占位（§3.9「提示不占版面」）。
   ========================================================================== */
.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  margin: var(--sp-5) 0 var(--sp-3);
}
.list-toolbar__left,
.list-toolbar__right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  min-width: 0;
}
.list-toolbar .el-button + .el-button {
  margin-left: 0;
}
.list-toolbar .el-button.is-text {
  height: 24px;
  padding: var(--sp-1) var(--sp-3);
}
/* 无写权限时工具条左侧的一行说明（方案 §4.6）：只解释原因，不做禁用样式 */
.list-toolbar__hint {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  color: var(--text-3);
}

/* ==========================================================================
   9.14 「文件优先」：文件格 = 列表第一列（P15）
   ---------------------------------------------------------------------
   改前：文件列是「配菜」—— 装柜资料 210px 挂在最右（还被「保存样式」存下的列宽锁死），
        4 个单据页 230px 排在唛头/备注之后，询价表图片列只有 140px 只显 2 张；文字列
        （客户/柜号/唛头/备注/中英品名/描述）合计吃掉 700~900px，文件永远不在第一眼落点。
   改后：文件列升到第一列并加宽（装柜 340 / 单据 300 / 余货 300 / 询价 220），文字列收窄
        并统一 show-overflow-tooltip；文件格白底、13px、文件名可点、带扩展名徽标，
        行高按「有文件 62 / 无文件 44」分档。
   本段只写「文件格自身的视觉权重」：列序与列宽由各页 columns 配置决定（可被 table-layout 存），
   不在这里写死宽度，避免 CSS 与用户保存的列宽打架。
   选择器口径：.doc-cell / .cell-doc / .docs-cell / .doc-chip 这套类名只有这几张列表页在用，
   按类钩子书写即可（不再逐页根类罗列 5 遍）；需要改 §9.11 已定的行高时才回 §9.11 就地改，
   避免同一条规格出现两份真相。
   ========================================================================== */
/* 9.14.1 扩展名徽标：纯字符 + 品牌蓝系（pdf 深底反白 / doc 浅蓝 / xls 中蓝 / 图片淡蓝 /
   未上传占位中性灰）。不引图标库、不加图片依赖（§5.4），首字母徽标就够识别文件类型。 */
.doc-ext {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 26px;
  height: 17px;
  padding: 0 3px;
  border-radius: var(--r-base);
  background-color: var(--brand-50);
  color: var(--brand-600);
  font-size: 9px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  line-height: 1;
}
.doc-ext--pdf {
  background-color: var(--brand-600);
  color: var(--n-0);
}
.doc-ext--doc {
  background-color: var(--brand-100);
  color: var(--brand-700);
}
.doc-ext--xls {
  background-color: var(--brand-200);
  color: var(--brand-800);
}
.doc-ext--img {
  background-color: var(--brand-300);
  color: var(--brand-800);
}
.doc-ext.is-empty {
  background-color: var(--n-100);
  color: var(--text-4);
}
/* 悬停：徽标跟着文件名一起亮起来（整条 chip / 整个文件格 hover 都算） */
.doc-chip:hover .doc-ext,
.doc-cell:hover .doc-ext {
  box-shadow: 0 0 0 1px var(--brand-400);
}

/* 9.14.2 文件单元格：白底（不再是灰字配菜）、13px、可点。白底只落在文件列这一格，
   行悬停时仍跟随整行高亮，不会在表格里挖出一个白洞。 */
.el-table td.cell-doc,
.el-table td.cell-docs {
  background-color: var(--n-0);
}
.el-table tbody tr:hover > td.cell-doc,
.el-table tbody tr:hover > td.cell-docs {
  background-color: var(--row-hover-bg);
}
/* 文件列排在第一位后，第一格的左内边距由 §4.6 的 12px 提供，这里只补齐左右对称感 */
.el-table td.cell-doc > .cell,
.el-table td.cell-docs > .cell {
  padding-left: var(--sp-4);
}
.el-table td.cell-doc .doc-ext {
  margin-right: var(--sp-1);
}
/* 文件格的两行（文件名 + 动作）在 62px 里居中，多出来的高度当留白，不再把内容顶到上沿 */
.el-table .doc-cell.is-done {
  justify-content: center;
  gap: var(--sp-2);
}
.el-table .doc-cell .doc-acts {
  min-height: 20px;
}
/* 状态位：已上传绿、未上传中性灰（el-tag 的 success/info 语义已由页面给，这里只补字重） */
.el-table td.cell-doc .doc-line .el-tag {
  font-weight: var(--fw-medium);
}

/* 9.14.3 装柜资料三槽位 chip：13px 文件名、未上传整条淡显、已上传描品牌边
   淡显用 opacity .8 而不是 .55：.55 会把「No subido」/类型徽标压到 3.3:1 以下（axe 口径 4.5:1 不达标），
   .8 既保留「未上传」的弱化感，又让 11px 的状态字与徽标留在 AA 线以上。 */
.page-order-list .el-table .docs-cell {
  min-height: 62px;
  justify-content: center;
}
.page-order-list .el-table .doc-chip-name {
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--text-1);
}
.page-order-list .el-table .doc-chip .doc-ext {
  margin-right: var(--sp-1);
}
.page-order-list .el-table .doc-chip.is-done {
  border-color: var(--brand-200);
}
.page-order-list .el-table .doc-chip:hover {
  border-color: var(--brand-400);
}
.page-order-list .el-table .doc-chip:not(.is-done) {
  opacity: 0.8;
}
.page-order-list .el-table .doc-chip:not(.is-done):hover,
.page-order-list .el-table .doc-chip:not(.is-done):focus-within {
  opacity: 1;
}
/* 已上传的状态：一颗绿色对勾 + 淡绿底（§9.11.7 已把底色收透明，这里补圆角与字色） */
.page-order-list .el-table .doc-chip-state.is-done-icon {
  border-radius: var(--r-pill);
}

/* ==========================================================================
   §10 窄屏响应式（方案 §3.10）
   原则：只做「列隐藏 + 换行 + 内边距收敛」，不 display:none 业务元素。
   列隐藏依赖列上同时声明 class-name 与 label-class-name（见报告「需交互确认」）。
   ========================================================================== */

/* 10.1 ≤1279px：隐藏 P3 优先级列 */
@media (max-width: 1279px) {
  .el-table .col-p3 {
    display: none !important;
  }
}

/* 10.2 ≤1023px：隐藏 P2 列 + 筛选条换行 */
@media (max-width: 1023px) {
  .el-table .col-p2 {
    display: none !important;
  }

  .el-form--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .el-form--inline .el-form-item {
    margin-right: var(--sp-5);
    margin-bottom: var(--sp-4);
  }

  .page-order-list,
  .page-surplus-list,
  .page-inquiry-list,
  .page-prodtrack-list,
  .page-quotation-list,
  .page-bill-list,
  .page-orderback-list,
  .page-order-edit,
  .page-surplus-edit,
  .page-quotation-edit,
  .page-prodtrack-edit,
  .page-bill-edit,
  .page-orderback-edit {
    padding: var(--sp-5);
  }

  /* 编辑页图片网格与上传卡片换行（重复列数收敛，不删元素） */
  .page-order-edit .image-grid,
  .page-surplus-edit .image-grid,
  .page-quotation-edit .image-grid,
  .page-prodtrack-edit .image-grid,
  .page-bill-edit .image-grid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  }

  /* 登录页 <1024：双栏堆叠为单列，品牌区压缩为顶部一条（方案 §4.4） */
  .page-login.login-shell {
    flex-direction: column;
  }
  .page-login .login-brand {
    flex: 0 0 auto;
    min-height: 120px;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-6);
  }
  .page-login .login-brand__title {
    font-size: var(--fs-20);
    line-height: var(--lh-20);
  }
  .page-login .login-brand__tag {
    display: none;   /* 价值主张是营销句, 非业务元素：窄屏让位给表单 */
  }
  .page-login .login-panel {
    padding: var(--sp-7) var(--sp-6) var(--sp-8);
  }
  .page-login .login-card {
    max-width: 420px;
    padding: var(--sp-8) var(--sp-7);
  }

  /* 导航页 ≤1023：卡片最小 240px，两列更稳 */
  .page-nav.page-nav-shell {
    padding: var(--sp-7);
  }
  .page-nav .nav-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

/* 10.3 ≤767px：隐藏 P1 列 + 单列堆叠 */
@media (max-width: 767px) {
  .el-table .col-p1 {
    display: none !important;
  }

  /* 筛选条：一项一行 */
  .el-form--inline .el-form-item {
    width: 100%;
    margin-right: 0;
    margin-bottom: var(--sp-4);
  }
  .el-form--inline .el-form-item__content {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* 列表页外壳 */
  .page-order-list,
  .page-surplus-list,
  .page-inquiry-list,
  .page-prodtrack-list,
  .page-quotation-list,
  .page-bill-list,
  .page-orderback-list {
    padding: var(--sp-5);
  }

  /* 编辑页：上传卡片单列、图片网格更密 */
  .page-order-edit,
  .page-surplus-edit,
  .page-quotation-edit,
  .page-prodtrack-edit,
  .page-bill-edit,
  .page-orderback-edit {
    padding: var(--sp-5);
  }
  .page-order-edit .upload-item,
  .page-surplus-edit .upload-item,
  .page-quotation-edit .upload-item,
  .page-prodtrack-edit .upload-item,
  .page-bill-edit .upload-item,
  .page-orderback-edit .upload-item {
    min-width: 100%;
  }
  .page-order-edit .image-grid,
  .page-surplus-edit .image-grid,
  .page-quotation-edit .image-grid,
  .page-prodtrack-edit .image-grid,
  .page-bill-edit .image-grid {
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  }
  .page-order-edit .footer-bar .el-button,
  .page-surplus-edit .footer-bar .el-button,
  .page-quotation-edit .footer-bar .el-button,
  .page-prodtrack-edit .footer-bar .el-button,
  .page-bill-edit .footer-bar .el-button,
  .page-orderback-edit .footer-bar .el-button {
    min-width: 0;
    margin: 0 4px;
  }

  /* 导航页：单列卡片 */
  .page-nav.page-nav-shell {
    padding: var(--sp-5);
  }
  .page-nav .nav-head {
    align-items: flex-start;
  }
  .page-nav .nav-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  /* 登录页：原 420px 固定卡在 360px 屏必然溢出 → 满宽 + 上限（方案 §4.4 / L-05） */
  .page-login .login-brand {
    min-height: 96px;
    padding: var(--sp-5);
  }
  .page-login .login-brand__title {
    font-size: var(--fs-18);
    line-height: var(--lh-18);
  }
  .page-login .login-brand__cn {
    font-size: var(--fs-12);
    line-height: var(--lh-12);
  }
  .page-login .login-panel {
    padding: var(--sp-5) var(--sp-5) var(--sp-7);
  }
  .page-login .login-card {
    width: 100%;
    max-width: 100%;
    padding: var(--sp-7) var(--sp-6);
  }

  /* 表格：窄屏下横向滚动条常显，避免「看不到还有列」 */
  .el-table .el-scrollbar__bar.is-horizontal {
    height: 10px;
    opacity: 1;
  }

  /* 分页行：分页控件换行到下一行 */
  .el-pagination {
    flex-wrap: wrap;
    row-gap: var(--sp-2);
  }
}

/* ==========================================================================
   10.4 页头折行（P3 收尾批次 · 375 页头横向溢出修复）
   ---------------------------------------------------------------------
   现象：375 宽下 5 个列表页的 document 宽被撑到 375 以上（prodtrack-list / bill-list 实测 436px，
         surplus-list 自身 620px —— 它的右簇多了「客户订单档案 / 询价记录」两个导航按钮）。
   实测（同一份 DOM，摘掉本节规则复现「修复前」）：
         prodtrack-list 436 → 375，bill-list 436 → 375，surplus-list 620 → 375；
         order-list（内联已 wrap）375 → 375，order-edit 375 → 375（无回归）；
         1366 视口下 surplus-list 1366 → 1366、页头 scrollWidth 1334 → 1334（视觉零回退）。
   根因：这 5 页的页头是模板里的内联 flex
         <div style="display:flex;justify-content:space-between;align-items:center;">
         右侧「返回导航 / 用户名 + 角色 tag / 退出」簇本身是 nowrap 的按钮组
         （el-button 默认 white-space:nowrap），而内联 flex 没有声明 flex-wrap，
         于是该容器的 min-content = 标题 min-content + 右簇 min-content（约 312px），
         比可用宽度（375 − 2 × 20px 的 .page padding = 335px）还宽 → 整页横向溢出，
         标题被右簇挤住不换行、也不收缩（flex item 默认 min-width:auto）。
         对照：order-list.html:139 与 inquiry-list.html:23 的同一处内联样式早就写了
         flex-wrap:wrap（还有 gap:10px），所以这两页 375 下不溢出——本批把同样的能力
         沉淀进 app.css，其余 5 页无需改 markup 即可折行。
   为什么只改 CSS 就能生效：那 5 页的内联样式只声明了 display / justify-content /
   align-items，没有声明 flex-wrap 与 min-width，故这里补的两条不会和内联样式打架、
   也不需要 !important（若将来有人把 flex-wrap 写进内联样式，本段仍然兼容）。
   为什么不放进 @media：flex-wrap 只在内容放不下时才实际折行，放得下时与不折行完全等价，
   所以 1366 / 1279 / 1023 的渲染结果不变（已用截图 + 页头 scrollWidth 复测）。row-gap 只在多行时才可见。
   ========================================================================== */
/* 10.4.1 列表页页头：容器可折行；右簇可折行且可收缩；标题可收缩（min-width:0 解除 min-content 撑宽） */
.page-prodtrack-list > div:first-child,
.page-quotation-list > div:first-child,
.page-bill-list > div:first-child,
.page-orderback-list > div:first-child,
.page-surplus-list > div:first-child {
  flex-wrap: wrap;
  row-gap: var(--sp-4);
}
.page-prodtrack-list > div:first-child > div,
.page-quotation-list > div:first-child > div,
.page-bill-list > div:first-child > div,
.page-orderback-list > div:first-child > div,
.page-surplus-list > div:first-child > div {
  flex-wrap: wrap;
  min-width: 0;
  row-gap: var(--sp-3);
}
.page-prodtrack-list > div:first-child > h2,
.page-quotation-list > div:first-child > h2,
.page-bill-list > div:first-child > h2,
.page-orderback-list > div:first-child > h2,
.page-surplus-list > div:first-child > h2 {
  min-width: 0;
}

/* 10.4.2 编辑页页头：标题可收缩、动作簇可折行。
   §9.9 已给 .page-head flex-wrap、§9.9.7 已给 .page-head__actions 100% 宽，这里只补
   min-width:0 与动作簇自身的折行；不给 .el-button 加 min-width:0 —— §9.9 的 120px 最小宽度
   是「返回 / 保存」的视觉规格，压掉它会让 1366 的按钮变窄（视觉回退）。 */
.page-order-edit .page-title,
.page-surplus-edit .page-title,
.page-quotation-edit .page-title,
.page-prodtrack-edit .page-title,
.page-bill-edit .page-title,
.page-orderback-edit .page-title {
  min-width: 0;
}
.page-order-edit .page-head__actions,
.page-surplus-edit .page-head__actions,
.page-quotation-edit .page-head__actions,
.page-prodtrack-edit .page-head__actions,
.page-bill-edit .page-head__actions,
.page-orderback-edit .page-head__actions {
  flex-wrap: wrap;
  min-width: 0;
  row-gap: var(--sp-3);
}

/* ==========================================================================
   §10.5 ≤767px：表格行转卡片（方案 §3.10，报告 :549-559）
   ---------------------------------------------------------------------
   方案原文（报告 :549-554）：
     .table-as-card .el-table__body tr{ display:block; }
     .table-as-card .el-table__header{ display:none; }
     .pager{ --h-pager:64px; }
     .action-bar{ position:sticky; bottom:0; }
     .page{ padding:var(--sp-5); }
   落地情况：前两条在本节按 Element Plus 2.x 的真实 DOM 落成完整卡片规格；
   `.page{padding:var(--sp-5)}` 已由 §10.3 覆盖 7 个列表页；
   `.pager` / `.action-bar` 在列表页当前没有对应元素（分页是内联 div、无吸底工具条），
   为不引入空选择器、不虚构骨架类，暂不落地，随「分页 layout 是否升级」一并列入
   需产品确认项（报告 §C-04）。
   为什么用 .table-as-card 显式声明而不给所有 el-table 生效：抽屉/编辑页里的表格仍应横向滚动，
   是否卡片化由页面决定（7 个列表页已加该类）。
   卡片内每格标签来自页面模板里的 span.cd-label（≥768 由 .cd-label{display:none} 隐藏，
   1366 渲染零变化），因此不依赖表头文字，也不受 createTableLayout 列重排影响。
   ========================================================================== */
.cd-label {
  display: none;
}

@media (max-width: 767px) {
  .table-as-card.el-table,
  .table-as-card .el-table__inner-wrapper {
    border: 0 !important;
    background: transparent;
  }
  .table-as-card .el-table__inner-wrapper::before,
  .table-as-card .el-table__inner-wrapper::after {
    display: none;
  }
  .table-as-card .el-table__header-wrapper {
    display: none !important;
  }
  .table-as-card .el-table__body-wrapper,
  .table-as-card .el-table__body-wrapper .el-scrollbar__wrap {
    overflow: visible !important;
  }
  .table-as-card .el-table__body-wrapper .el-scrollbar__bar {
    display: none !important;
  }
  .table-as-card .el-table__body {
    display: block;
    width: 100% !important;
  }
  .table-as-card .el-table__body tbody {
    display: block;
    width: 100%;
  }
  .table-as-card .el-table__body colgroup {
    display: none;
  }
  .table-as-card .el-table__body tr {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    background: var(--n-0);
    border: 1px solid var(--border-1);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
  }
  .table-as-card .el-table__body tr:hover > td,
  .table-as-card .el-table__body tr.hover-row > td,
  .table-as-card .el-table__body tr.el-table__row--striped > td {
    background: transparent !important;
  }
  .table-as-card .el-table__body td {
    display: block;
    width: auto !important;
    /* app.css:310 给 .el-table td.el-table__cell 写死了 height: var(--h-row)=44px；
       卡片里每格是「标签 + 内容」多行块，必须放回 auto，否则内容溢出压在下一格上
       （375 截图实测：Documentos 三枚 chip 与操作列按钮互相重叠）。 */
    height: auto !important;
    padding: var(--sp-2) 0 !important;
    border: 0 !important;
    border-bottom: 1px dashed var(--border-2) !important;
    background: transparent !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
  }
  /* 首末列固定 → 卡片里取消 sticky（否则固定列会叠在卡片右侧） */
  .table-as-card .el-table__body td.el-table-fixed-column--left,
  .table-as-card .el-table__body td.el-table-fixed-column--right {
    position: static !important;
    box-shadow: none !important;
  }
  .table-as-card .el-table__body td:last-child {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .table-as-card .el-table__body td .cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-4);
    width: 100%;
    padding: 0;
    line-height: 1.45;
    word-break: break-word;
    overflow: visible;
    text-overflow: clip;
  }
  .table-as-card .el-table__body td .cd-label {
    display: block;
    flex: 0 0 auto;
    font-size: var(--fs-11);
    line-height: var(--lh-11);
    color: var(--text-3);
  }
  /* 复合单元格 / 操作 / 进度块：标签单独一行，内容整行占满，卡片内部沿用原结构 */
  .table-as-card .el-table__body td .cell-composite,
  .table-as-card .el-table__body td .docs-cell,
  .table-as-card .el-table__body td .ops-cell,
  .table-as-card .el-table__body td .row-prog,
  .table-as-card .el-table__body td .thumb-row {
    flex: 1 1 100%;
  }
  .table-as-card .el-table__body td .ops-cell {
    justify-content: flex-end;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-3);
  }
  .table-as-card .el-table__body td .cust-cell {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  /* 卡片模式下空态块居中，不再依赖被隐藏的表头 */
  .table-as-card .el-table__empty-block {
    width: 100% !important;
    min-height: 120px;
  }
}

/* ==========================================================================
   §10.6 ≤767px：卡片列白名单（票 08「手机卡片里到底显示哪几列」，报告 §8）
   ---------------------------------------------------------------------
   改前：卡片显示哪几列 = 「§10.1–§10.3 按 p1/p2/p3 逐级隐藏后剩什么算什么」，
   每页行数不受控，实测 375 下 surplus-list 一张卡片 7 行、inquiry-list 只有 2 行。
   改后：显式白名单 —— 列上挂 .col-m 表示「≤767 允许进卡片」，未挂的列在卡片里一律不显示。
        卡片行序仍沿用 DOM 列序（用户拖拽列序会改变卡片行序：本票已知取舍，不做额外解耦机制）。
   为什么不按「只给 .col-m 显示、其余交给 col-p1/2/3 隐藏」写：surplus-list 的列从来
   没有 p 级钩子，而要隐藏的 Marcas/Clientes/Observaciones 在 768–1279 仍应照常显示，
   借用 p2/p3 会连带改掉平板视图（本票只谈 ≤767）。
   层叠：`.table-as-card.el-table .el-table__body td:not(.col-m)` = (0,4,1)，
   高于 §10.3 的 `.el-table .col-p2` = (0,2,0)；显示侧同理压过 p1/p2/3，故 p2 列挂上
   .col-m 后能在 ≤767 重新出现（inquiry-list 的 Código / Precio 就是这种情况）。
   ========================================================================== */
@media (max-width: 767px) {
  .table-as-card.el-table .el-table__body td:not(.col-m) {
    display: none !important;
  }
  .table-as-card.el-table .el-table__body td.col-m {
    display: block !important;
  }
  /* 白名单落地后，「可见的首/末行」不再等于「DOM 首/末列」（例：inquiry-list 的 Precio 后面
     还排着被隐藏的 col-p3 列），§10.5 的 td:last-child{border-bottom:0} 兜不住，
     卡片底部会留一条悬空虚线 —— 改为「首行之外每行一条上虚线」，
     各页白名单都从第 1 列开始，语义稳定；从 :first-child 而非 :first-of-type 起算，
     万一某页白名单不从第 1 列起，最坏也只是多/少一条虚线，不影响行数与溢出。 */
  .table-as-card .el-table__body td {
    border-bottom: 0 !important;
  }
  .table-as-card .el-table__body td:not(:first-child) {
    border-top: 1px dashed var(--border-2) !important;
  }
}

/* ==========================================================================
   §10.7 ≤767px：卡片里的文件格（P15 文件优先）
   ---------------------------------------------------------------------
   文件格已经是卡片第一行（列序决定，见各页 columns）。卡片里单元格是 block 块，
   桌面端那套「白底 + 62/44 固定行高 + 居中」在新容器里会撑出空白或与卡片背景打架：
     · 白底 → 透明（卡片本身是白底，格子再白会多出一层边）
     · 62/44 → auto（卡片行高交给内容，配合 §10.5 的 height:auto!important）
     · 文件格内容左对齐、占满整行（配合 §10.5 的 .cell 折行）
   不影响 ≥768 的表格视图，也不改 §10.5/§10.6 的既有规则。
   ========================================================================== */
@media (max-width: 767px) {
  .table-as-card .el-table__body td.cell-doc,
  .table-as-card .el-table__body td.cell-docs {
    background-color: transparent !important;
  }
  .table-as-card .el-table__body td.cell-doc > .cell,
  .table-as-card .el-table__body td.cell-docs > .cell {
    padding-left: 0;
  }
  .table-as-card .el-table__body td .doc-cell,
  .table-as-card .el-table__body td .docs-cell {
    min-height: 0;
    justify-content: flex-start;
    gap: var(--sp-2);
  }
  .table-as-card .el-table__body td .doc-line {
    flex-wrap: wrap;
    min-height: 0;
  }
  .table-as-card .el-table__body td .doc-acts {
    min-height: 0;
    justify-content: flex-start;
  }
  /* 文件格里的文件名允许换行显示全（卡片宽度小，省略号会切到只看得见扩展名） */
  .table-as-card .el-table__body td .doc-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-all;
  }
}

/* ==========================================================================
   §9.15 装柜资料：三份单据各自成列（P16）
   一格一份文件 —— 类型徽标 + 文件名 + 绿勾状态 + 动作行；
   215px 的列里把「Subido」三个字换成 14px 勾，文件名多出 4-5 个字符。
   ========================================================================== */
.page-order-list .el-table td.cell-doc {
  padding-left: var(--sp-3);
  padding-right: var(--sp-3);
}
.page-order-list .el-table .doc-ok {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: var(--r-pill);
  background-color: var(--success-600);
  color: #fff;
  font-size: 10px;
  line-height: 1;
}
.page-order-list .el-table .doc-none {
  flex: 0 0 auto;
  font-size: var(--fs-12);
  color: var(--text-3);
}
.page-order-list .el-table .doc-busy {
  flex: 0 0 auto;
  font-size: var(--fs-11);
  color: var(--brand-700);
}
.page-order-list .el-table .doc-acts .doc-more {
  padding: 0 2px;
  min-width: 0;
  font-size: 14px;
  color: var(--text-3);
}
/* ==========================================================================
   9.15.1 三列文件格 = 一行一字（P16 第三版）
   默认只看见「徽标 + 文件名 + 绿勾」三件东西；Descargar / Reemplazar / › 收进
   悬停浮层（absolute，不占行高、不产生布局跳动），鼠标进格才出现。
   理由：三列 × 六行 = 18 组蓝色文字链是「乱」的主要来源；把它们收起来，
   行高从 46-64 降到 44，三列横平，一眼扫下来只剩文件名。
   ========================================================================== */
.page-order-list .el-table td.cell-doc {
  padding: var(--sp-2) var(--sp-3);
  vertical-align: middle;
}
.page-order-list .el-table .doc-cell {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 28px;
}
.page-order-list .el-table .doc-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
  height: 24px;
}
.page-order-list .el-table .doc-ext {
  flex: 0 0 auto;
  width: 22px;
  min-width: 22px;
  padding: 0;
  font-size: 9px;
  letter-spacing: 0;
}
.page-order-list .el-table .doc-name {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 24px;
  text-align: left;
}
.page-order-list .el-table .doc-ok {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  font-size: 9px;
}
.page-order-list .el-table .doc-acts {
  position: absolute;
  top: 50%;
  right: -6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  height: 26px;
  padding-left: 12px;
  background-color: var(--el-fill-color-light);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
.page-order-list .el-table .doc-cell:hover .doc-acts,
.page-order-list .el-table .doc-cell:focus-within .doc-acts {
  opacity: 1;
  pointer-events: auto;
}
.page-order-list .el-table .doc-acts .el-button {
  margin-left: 0;
  padding: 0 5px;
  height: 22px;
  font-size: var(--fs-12);
  line-height: 22px;
  color: var(--text-3);
}
.page-order-list .el-table .doc-acts .el-button:hover {
  color: var(--brand-700);
  background-color: transparent;
}
.page-order-list .el-table .doc-acts .doc-more {
  padding: 0 0 0 3px;
  font-size: 14px;
}
/* 空格：只留一个居中的 Subir（唯一动作），No subido 不显示——空格本身就是「没有」。 */
.page-order-list .el-table .doc-cell.is-empty .doc-none {
  display: none;
}
.page-order-list .el-table .doc-cell.is-empty .doc-acts {
  position: static;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  background-color: transparent;
  justify-content: center;
  width: 100%;
  padding-left: 0;
}
/* 触屏没有 hover：≤767 一律常显动作，不靠鼠标发现。 */
@media (max-width: 767px) {
  .page-order-list .el-table .doc-acts {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    background-color: transparent;
    padding-left: 0;
  }
}
/* ==========================================================================
   9.15.4 悬停动作改成「行内让位」，不再盖一层灰底浮层
   9.15.1 的做法是绝对定位 + 底色（--el-fill-color-light），在未整行染色的
   情况下就变成白格上的一块灰板 —— 视觉上像贴纸。改为：动作常驻 DOM，
   max-width 0→220px 展开，文件名让位缩短，两者始终同一条水平线。
   ========================================================================== */
.page-order-list .el-table .doc-acts {
  position: static;
  transform: none;
  flex: 0 0 auto;
  max-width: 0;
  padding-left: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background-color: transparent;
  transition: max-width .18s ease, opacity .12s ease;
}
.page-order-list .el-table .doc-cell:hover .doc-acts,
.page-order-list .el-table .doc-cell:focus-within .doc-acts {
  max-width: 240px;
  padding-left: 2px;
  opacity: 1;
  pointer-events: auto;
}
/* 名称与动作之间一个细点做分隔，代替浮层的边界感 */
.page-order-list .el-table .doc-acts::before {
  content: "·";
  flex: 0 0 auto;
  padding-right: 2px;
  color: var(--text-4);
  font-size: var(--fs-12);
}
.page-order-list .el-table .doc-acts .el-button {
  padding: 0 3px;
  height: 22px;
  font-size: var(--fs-11);
  line-height: 22px;
  color: var(--text-3);
}
.page-order-list .el-table .doc-acts .el-button + .el-button {
  margin-left: 0;
}
.page-order-list .el-table .doc-acts .doc-more {
  padding: 0 0 0 2px;
  font-size: 13px;
  color: var(--text-3);
}
/* 空格：动作区本来就是唯一内容，直接常显 */
.page-order-list .el-table .doc-cell.is-empty .doc-acts {
  max-width: none;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.page-order-list .el-table .doc-cell.is-empty .doc-acts::before {
  content: none;
}
@media (max-width: 767px) {
  .page-order-list .el-table .doc-acts {
    max-width: none;
    opacity: 1;
    pointer-events: auto;
    position: static;
    transform: none;
    background-color: transparent;
  }
}
/* ==========================================================================
   9.15.5 单行扁平结构（徽标 · 文件名 · 动作 · 勾）
   9.15.1 的 .doc-line 包一层、勾在名字右边，9.15.4 又让动作行内展开 ——
   三者在 225px 内打架。收敛成一个 flex 行：徽标(定宽) / 文件名(伸缩) /
   动作(悬停展开) / 勾(固定右轨)。模板已去掉 .doc-line 包装。
   ========================================================================== */
.page-order-list .el-table .doc-cell {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  width: 100%;
}
.page-order-list .el-table .doc-cell .doc-ext {
  flex: 0 0 auto;
  order: 0;
  width: 22px;
  min-width: 22px;
  padding: 0;
  font-size: 9px;
  letter-spacing: 0;
  text-align: center;
}
.page-order-list .el-table .doc-cell .doc-name {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  height: 24px;
  line-height: 24px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-order-list .el-table .doc-cell .doc-acts {
  order: 2;
  position: static;
  transform: none;
  flex: 0 0 auto;
  max-width: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background: transparent;
  transition: max-width .18s ease, opacity .12s ease;
  height: 24px;
}
.page-order-list .el-table .doc-cell:hover .doc-acts,
.page-order-list .el-table .doc-cell:focus-within .doc-acts {
  max-width: 168px;
  opacity: 1;
  pointer-events: auto;
}
.page-order-list .el-table .doc-cell .doc-acts::before {
  content: "·";
  flex: 0 0 auto;
  padding: 0 1px 0 2px;
  color: var(--text-4);
  font-size: var(--fs-12);
}
.page-order-list .el-table .doc-cell .doc-acts .el-button {
  padding: 0 3px;
  height: 24px;
  font-size: var(--fs-11);
  line-height: 24px;
  color: var(--text-3);
}
.page-order-list .el-table .doc-cell .doc-acts .el-button + .el-button {
  margin-left: 0;
}
.page-order-list .el-table .doc-cell .doc-acts .doc-more {
  padding: 0 0 0 2px;
  font-size: 13px;
}
.page-order-list .el-table .doc-cell .doc-ok {
  order: 3;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-left: 2px;
  font-size: 9px;
}
.page-order-list .el-table .doc-cell.is-empty {
  justify-content: center;
}
.page-order-list .el-table .doc-cell.is-empty .doc-acts {
  max-width: none;
  opacity: 1;
  pointer-events: auto;
  justify-content: center;
}
.page-order-list .el-table .doc-cell.is-empty .doc-acts::before {
  content: none;
}
@media (max-width: 767px) {
  .page-order-list .el-table .doc-cell .doc-acts {
    max-width: none;
    opacity: 1;
    pointer-events: auto;
  }
}

/* 9.15.6 格内动作常显（只保留 Subir / ›，Descargar·Reemplazar 在抽屉里） */
.page-order-list .el-table .doc-cell .doc-acts {
  max-width: none;
  opacity: 1;
  pointer-events: auto;
}
.page-order-list .el-table .doc-cell .doc-acts::before {
  content: none;
}
/* 9.15.7 纠正 §9.11 继承下来的 width:100%（它让 .doc-acts 撑满整格、把文件名挤成 0） */
.page-order-list .el-table .doc-cell .doc-acts {
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
}
/* 9.15.8 右轨顺序：文件名 → 勾（状态）→ ›（入口） */
.page-order-list .el-table .doc-cell .doc-ok {
  order: 2;
  margin-left: 2px;
}
.page-order-list .el-table .doc-cell .doc-acts {
  order: 3;
  margin-left: 4px;
  justify-content: flex-end;
}
.page-order-list .el-table .doc-cell .doc-acts .doc-more {
  padding: 0;
  font-size: 14px;
  color: var(--text-4);
}
.page-order-list .el-table .doc-cell .doc-acts .doc-more:hover {
  color: var(--brand-700);
}
.page-order-list .el-table .doc-cell.is-empty .doc-acts {
  margin-left: 0;
  justify-content: center;
}
/* ==========================================================================
   9.15.9 格子退化为「一块可点区域」（P16-E，按用户口径重做）
   列表页不做任何文件操作：整格点哪儿都开右侧抽屉，抽屉里才有
   Vista previa / Descargar / Reemplazar / Eliminar / Subir。
   没上传 = 整格留白（不渲染 No subido，也不放 Subir 按钮）；
   已上传 = 类型徽标 + 文件名 + 绿勾，全部不可单独点击。
   ========================================================================== */
.page-order-list .el-table .doc-cell {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  min-height: 26px;
  padding: 0 4px;
  margin: 0 -4px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color .12s ease;
}
.page-order-list .el-table .doc-cell:hover {
  background-color: var(--brand-50);
}
.page-order-list .el-table .doc-cell:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 1px;
}
.page-order-list .el-table .doc-cell .doc-ext {
  flex: 0 0 auto;
  width: 22px;
  min-width: 22px;
  padding: 0;
  font-size: 9px;
  text-align: center;
}
.page-order-list .el-table .doc-cell .doc-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
  font-size: var(--fs-13);
  color: var(--text-1);
  text-decoration: none;
}
/* 没有单独立的动作区了：旧规则全部失效，这里显式关掉，避免残留占位 */
.page-order-list .el-table .doc-cell .doc-acts {
  display: none !important;
}
.page-order-list .el-table .doc-cell .doc-busy {
  flex: 0 0 auto;
  font-size: var(--fs-11);
  color: var(--brand-700);
}
.page-order-list .el-table .doc-cell .doc-ok {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-left: 2px;
  font-size: 9px;
}
/* 空格：真留白，但保留可点面积（行高不被压扁） */
.page-order-list .el-table .doc-cell.is-empty {
  min-height: 26px;
}
/* ==========================================================================
   9.16 抽屉里的单据卡：显示真实文件名 / 权限与列表页一致
   抽屉原来只写「Factura/Empaque + Subido」——客户看不出是哪份文件，
   必须点预览才知道。现在标题列变成两行（单据类型 + 文件名），文件名
   可点且直接预览（只读操作，任何账号可用）。
   ========================================================================== */
.page-order-list .docs-card-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.page-order-list .docs-card-file {
  max-width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--fs-12);
  color: var(--text-2);
  cursor: pointer;
  align-self: flex-start;
}
.page-order-list .docs-card-file:hover {
  color: var(--brand-700);
  text-decoration: underline;
}
/* 9.16.1 修正作用域：el-drawer 是 append-to-body，DOM 在 .page-order-list 之外，
   带页面前缀的选择器匹配不到，必须用无前缀的 .docs-card-* 选择器。 */
.docs-card-titles {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
  margin-right: 8px;
}
.docs-card-file {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--fs-12);
  line-height: 1.35;
  color: var(--text-2);
  cursor: pointer;
  align-self: flex-start;
}
.docs-card-file:hover {
  color: var(--brand-700);
  text-decoration: underline;
}
/* ==========================================================================
   §9.17 筛选条对齐（P18）
   现象：7 个列表页用 <el-form :inline="true">，Element Plus 默认把 label 与控件
   挤在同一个 inline-block 里，窗口一窄就换行成「Fecha 独占一行、Marcas 又缩进一段」，
   label 的基线也跟着控件高度浮动 —— 就是「查询条件文字和控件错位」。
   改法：整个筛选条变成 flex 换行容器，每个条件变成「label 在上、控件在下」的一列，
   行间距由 gap 统一给，任何宽度下标签左边缘与控件左边缘都对齐。
   ========================================================================== */
.el-form--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.el-form--inline .el-form-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
  vertical-align: initial;
}
.el-form--inline .el-form-item__label {
  float: none;
  width: auto !important;
  padding: 0 0 4px;
  font-size: var(--fs-12);
  line-height: 1.35;
  color: var(--text-2);
  text-align: left;
  justify-content: flex-start;
}
.el-form--inline .el-form-item__content {
  margin-left: 0 !important;
  line-height: 1;
  min-width: 0;
}
/* 按钮那一条（没有 label）不会被拉扯：让内容自己横向排 */
.el-form--inline .el-form-item:last-child .el-form-item__content {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
/* 9.17.1 label 仍被 EP 的 inline 规则压住（高度 32、右对齐），这一层用 !important 钉死：
   inline 筛选条里 label 只是一行 12px 灰字，左对齐、与控件左边缘同一条线。 */
.el-form--inline .el-form-item > .el-form-item__label {
  display: block !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 0 4px 0 !important;
  margin: 0 !important;
  font-size: var(--fs-12) !important;
  line-height: 1.35 !important;
  font-weight: var(--fw-medium) !important;
  color: var(--text-2) !important;
  text-align: left !important;
  justify-content: flex-start !important;
}
/* ==========================================================================
   §9.18 账单列表：只读列表 + 右侧抽屉（P18）
   与 order-list 同一口径：列表页不做文件操作，整格是抽屉入口。
   ========================================================================== */
.doc-cell--click {
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background-color 120ms ease;
}
.doc-cell--click:hover {
  background-color: var(--brand-50);
}
.doc-cell--click:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}
/* 抽屉里只有一份单据：卡片占满宽度，动作一行排开 */
.docs-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
}
.docs-drawer-body {
  padding: var(--sp-4) var(--sp-5);
}
.docs-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.docs-drawer-titles {
  min-width: 0;
}
.docs-drawer-title {
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
  line-height: 1.4;
}
.docs-drawer-meta {
  font-size: var(--fs-12);
  color: var(--text-3);
  line-height: 1.5;
}
/* 9.18.1 抽屉里的单据卡（各页通用；order-list 用自己页内的同名样式，这里是给单据页补的底） */
.docs-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  background-color: var(--n-0);
}
.docs-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.docs-card-name {
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
  line-height: 1.5;
}
/* 9.18.2 抽屉里的文件名：只有可预览类型才有手型/下划线（避免「看着能点、点下去其实是下载」） */
.docs-card-file {
  cursor: default;
}
.docs-card-file.is-previewable {
  cursor: pointer;
}
.docs-card-file.is-previewable:hover {
  color: var(--brand-700);
  text-decoration: underline;
}
/* 9.19 抽屉里「无下载权限」的说明行（账单：非 911 且非所属客户） */
.docs-card-hint {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background-color: var(--warn-50, #FDF6EC);
  color: #7A4A00;
  font-size: var(--fs-13);
  line-height: 1.5;
}
/* ==========================================================================
   §9.20 客户返单 Reordenar pedido
   左：历史订单 + 明细；右：返单清单（sticky）。窄屏单列堆叠。
   ========================================================================== */
.page-reorder-list .page-head {
  margin-bottom: var(--sp-4);
}
.page-reorder-list .page-title__cn,
.page-reorder-list .subtitle-cn {
  font-size: var(--fs-13);
  font-weight: var(--fw-regular);
  color: var(--text-3);
  margin-left: var(--sp-2);
}
.page-reorder-list .page-subtitle {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-13);
  color: var(--text-2);
}
.page-reorder-list .page-head__user {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-13);
  color: var(--text-2);
  margin: 0 var(--sp-2);
}
.page-reorder-list .ml-2 { margin-left: var(--sp-2); }

.page-reorder-list .reorder-banner {
  margin-bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--warn-200, #F3D19E);
  border-radius: var(--r-md);
  background-color: var(--warn-50, #FDF6EC);
  color: #7A4A00;
  font-size: var(--fs-13);
  line-height: 1.5;
}

.page-reorder-list .reorder-filter {
  margin-bottom: var(--sp-3);
}

.page-reorder-list .reorder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-4);
  align-items: start;
}
.page-reorder-list .reorder-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.page-reorder-list .reorder-block {
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  background-color: var(--n-0);
  padding: var(--sp-3);
}
.page-reorder-list .reorder-block__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
}
.page-reorder-list .reorder-block__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background-color: var(--brand-50);
  color: var(--brand-700);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
}
.page-reorder-list .reorder-block__sub {
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  color: var(--text-3);
}
.page-reorder-list .reorder-block__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.page-reorder-list .reorder-selected {
  font-size: var(--fs-13);
  color: var(--text-2);
}
.page-reorder-list .reorder-billno {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
  color: var(--brand-700);
}
.page-reorder-list .reorder-prod {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.page-reorder-list .reorder-prod__es {
  font-size: var(--fs-13);
  color: var(--text-1);
}
.page-reorder-list .reorder-prod__cn {
  font-size: var(--fs-12);
  color: var(--text-3);
}
.page-reorder-list .reorder-empty {
  padding: var(--sp-5) var(--sp-3);
  text-align: center;
  font-size: var(--fs-13);
  color: var(--text-3);
}

.page-reorder-list .reorder-cart {
  position: sticky;
  top: var(--sp-4);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  background-color: var(--n-0);
  padding: var(--sp-3);
}
.page-reorder-list .reorder-cart__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
}
.page-reorder-list .reorder-cart__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-height: 46vh;
  overflow: auto;
}
.page-reorder-list .reorder-cart__item {
  border: 1px solid var(--n-200);
  border-radius: var(--r-md);
  padding: var(--sp-2);
  background-color: var(--n-50);
}
.page-reorder-list .reorder-cart__top {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.page-reorder-list .reorder-cart__code {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--brand-700);
}
.page-reorder-list .reorder-cart__bill {
  font-size: var(--fs-12);
  color: var(--text-3);
  margin-right: auto;
}
.page-reorder-list .reorder-cart__del {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--text-3);
  padding: 0 2px;
}
.page-reorder-list .reorder-cart__del:hover { color: var(--danger-600, #C0392B); }
.page-reorder-list .reorder-cart__name {
  margin-top: 2px;
  font-size: var(--fs-13);
  color: var(--text-1);
}
.page-reorder-list .reorder-cart__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: 2px;
  font-size: var(--fs-12);
  color: var(--text-2);
}
.page-reorder-list .reorder-cart__amount {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
  color: var(--text-1);
}
.page-reorder-list .reorder-cart__foot {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--n-200);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.page-reorder-list .reorder-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--fs-13);
  color: var(--text-2);
}
.page-reorder-list .reorder-total b {
  font-size: var(--fs-14);
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.page-reorder-list .reorder-submit { width: 100%; }
.page-reorder-list .reorder-cart__hint {
  margin: 0;
  font-size: var(--fs-12);
  line-height: 1.5;
  color: var(--text-3);
}
.page-reorder-list .reorder-empty--cart { padding: var(--sp-4) var(--sp-2); }

.page-reorder-list .reorder-result {
  display: grid;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
}
.page-reorder-list .reorder-result__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-13);
  color: var(--text-2);
}
.page-reorder-list .reorder-result__row b {
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1279px) {
  .page-reorder-list .reorder-layout { grid-template-columns: minmax(0, 1fr); }
  .page-reorder-list .reorder-cart { position: static; }
  .page-reorder-list .reorder-cart__list { max-height: none; }
}
.page-reorder-list .reorder-banner--info {
  border-color: var(--brand-100, #D6E4F5);
  background-color: var(--brand-50);
  color: var(--brand-800, #123F76);
}
/* 9.20.1 页头与留白修正（本页不再用其它页的内联 style） */
.page-reorder-list .page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.page-reorder-list .page-head__titles { min-width: 0; }
.page-reorder-list .page-title {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
  line-height: 1.35;
}
.page-reorder-list .page-head__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.page-reorder-list .reorder-empty { line-height: 1.5; max-width: 46ch; margin: 0 auto; }
.page-reorder-list .reorder-cart__hint { font-size: var(--fs-13); }
.page-reorder-list .reorder-pager { margin-top: var(--sp-3); }
/* 9.20.2 el-alert 在 el-dialog / append-to-body 里，必须用无前缀选择器改文字色
   （Element Plus 默认 #E6A23C 文本配浅黄底只有 3.07:1，达不到 4.5:1） */
.el-alert--warning.is-light {
  background-color: var(--warn-50, #FDF6EC);
  color: #7A4A00;
}
.el-alert--warning.is-light .el-alert__title,
.el-alert--warning.is-light .el-alert__description {
  color: #7A4A00;
}
.el-alert--warning.is-light .el-alert__icon {
  color: var(--warn-600, #B26A00);
}
/* 9.21 返单页 v2：双表 + 右侧清单（9 条口径） */
.page-reorder-list .reorder-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
}
.page-reorder-list .reorder-filter {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}
.page-reorder-list .reorder-filter__label {
  font-size: var(--fs-12);
  line-height: 1.4;
  color: var(--text-2);
}
.page-reorder-list .reorder-filter--actions {
  flex-direction: row;
  align-items: flex-end;
  gap: var(--sp-2);
}
.page-reorder-list .reorder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-4);
  align-items: start;
}
.page-reorder-list .reorder-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}
.page-reorder-list .reorder-block {
  background-color: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  min-width: 0;
}
.page-reorder-list .reorder-block__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.page-reorder-list .reorder-block__title {
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
}
.page-reorder-list .reorder-block__cn {
  font-weight: var(--fw-normal);
  color: var(--text-3);
  font-size: var(--fs-12);
  margin-left: 4px;
}
.page-reorder-list .reorder-block__hint {
  font-size: var(--fs-12);
  color: var(--text-3);
  margin-left: auto;
}
.page-reorder-list .reorder-block__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}
.page-reorder-list .reorder-footer__sum {
  font-size: var(--fs-13);
  color: var(--text-2);
}
.page-reorder-list .reorder-footer__cn { color: var(--text-3); font-size: var(--fs-12); }
.page-reorder-list .reorder-footer__sep { color: var(--n-300); margin: 0 6px; }
.page-reorder-list .reorder-thumbs {
  display: flex;
  gap: 3px;
  flex-wrap: nowrap;
}
.page-reorder-list .reorder-thumb {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--n-200);
  cursor: zoom-in;
  background-color: var(--n-50);
}
.page-reorder-list .reorder-nothumb { color: var(--n-400); font-size: var(--fs-12); }
.page-reorder-list .reorder-marks { font-size: var(--fs-12); color: var(--text-2); }
.page-reorder-list .reorder-imgbig { display: block; max-width: 100%; max-height: 62vh; margin: 0 auto; }
.page-reorder-list .reorder-sql__sum {
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-13);
  color: var(--text-2);
}
.page-reorder-list .reorder-sql__sum strong { color: var(--text-1); margin-left: 6px; }
.page-reorder-list .reorder-dlg__row { margin-bottom: var(--sp-3); }
.page-reorder-list .reorder-dlg__label { display: block; font-size: var(--fs-12); color: var(--text-3); margin-bottom: 4px; }
.page-reorder-list .reorder-dlg__value { font-size: var(--fs-14); color: var(--text-1); }
.page-reorder-list .reorder-dlg__select { width: 100%; }

/* 右侧返单清单 */
.page-reorder-list .reorder-cart {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background-color: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  position: sticky;
  top: var(--sp-4);
}
.page-reorder-list .reorder-cart__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.page-reorder-list .reorder-cart__title { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--text-1); }
.page-reorder-list .reorder-cart__cn { font-weight: var(--fw-normal); color: var(--text-3); font-size: var(--fs-12); margin-left: 4px; }
.page-reorder-list .reorder-cart__empty {
  padding: var(--sp-4) var(--sp-2);
  text-align: center;
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--text-3);
  border: 1px dashed var(--n-300);
  border-radius: var(--r-md);
}
.page-reorder-list .reorder-cart__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-height: 340px;
  overflow: auto;
}
.page-reorder-list .reorder-cart__item {
  border: 1px solid var(--n-200);
  border-radius: var(--r-md);
  padding: var(--sp-2);
  background-color: var(--n-50);
}
.page-reorder-list .reorder-cart__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.page-reorder-list .reorder-cart__code { font-size: var(--fs-12); color: var(--text-1); font-weight: var(--fw-semibold); }
.page-reorder-list .reorder-cart__order { font-weight: var(--fw-normal); color: var(--text-3); margin-left: 6px; }
.page-reorder-list .reorder-cart__name { font-size: var(--fs-12); color: var(--text-2); margin-top: 2px; }
.page-reorder-list .reorder-cart__meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-12);
  color: var(--text-3);
  margin-top: 2px;
}
.page-reorder-list .reorder-cart__qty { color: var(--text-1); font-weight: var(--fw-semibold); }
.page-reorder-list .reorder-cart__note { font-size: var(--fs-12); color: var(--text-3); margin-top: 2px; font-style: italic; }
.page-reorder-list .reorder-cart__sum { display: flex; flex-direction: column; gap: 4px; }
.page-reorder-list .reorder-cart__sumrow {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-13);
  color: var(--text-2);
}
.page-reorder-list .reorder-submit { width: 100%; }
.page-reorder-list .reorder-cart__hint { margin: 0; font-size: var(--fs-13); line-height: 1.5; color: var(--text-3); }

@media (max-width: 1023px) {
  .page-reorder-list .reorder-layout { grid-template-columns: minmax(0, 1fr); }
  .page-reorder-list .reorder-cart { position: static; }
}
/* 9.21.1 返单弹窗：标签与控件同一行，右对齐控件 */
.reorder-dlg__row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.reorder-dlg__label { flex: 0 0 190px; font-size: var(--fs-13); color: var(--text-2); }
.reorder-dlg__value { font-size: var(--fs-13); color: var(--text-1); font-weight: var(--fw-semibold); }
.reorder-dlg__input, .reorder-dlg__select { flex: 1 1 auto; min-width: 0; }

/* ==========================================================================
   §9.23 询价记录 → 订货清单（.page-inquiry-list 追加部分）
   勾选列 / 工具条 / 加入弹窗 / 已加入上色。只在本节新增，不改既有选择器。
   ========================================================================== */
/* 9.23.1 只读提示条 + 勾选工具条 */
.page-inquiry-list .pick-banner {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--warn-200, #F3D19E);
  border-radius: var(--r-md);
  background-color: var(--warn-50, #FDF6EC);
  color: #7A4A00;
  font-size: var(--fs-13);
  line-height: 1.5;
}
.page-inquiry-list .pick-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-4);
}
.page-inquiry-list .pick-bar__left,
.page-inquiry-list .pick-bar__right {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.page-inquiry-list .pick-bar__count {
  font-size: var(--fs-13);
  color: var(--text-2);
}
.page-inquiry-list .pick-bar__count b {
  color: var(--text-1);
  font-weight: var(--fw-semibold);
}
.page-inquiry-list .pick-bar__hint {
  font-size: var(--fs-12);
  color: var(--text-3);
}

/* 9.23.2 勾选列（行首）+ 已加入小标签 + 整行浅色底 */
.page-inquiry-list .el-table .col-sel .cell {
  padding: 0 var(--sp-1);
  line-height: 1.25;
}
.page-inquiry-list .pick-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}
.page-inquiry-list .pick-tag {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 1px 4px;
  border-radius: var(--r-sm);
  background-color: var(--brand-50);
  color: var(--brand-700);
  font-size: var(--fs-11);
  line-height: 1.3;
  white-space: nowrap;
}
.page-inquiry-list .pick-tag__cn {
  font-size: var(--fs-11);
  color: var(--brand-600);
}
.page-inquiry-list .el-table__body tr.row-picked > td {
  background-color: #F1F7FF;
}
.page-inquiry-list .el-table__body tr.row-picked:hover > td {
  background-color: #E6F0FE;
}

/* 9.23.3 加入订货清单弹窗（单行 / 多行拼箱 / 多行不拼箱 共用一个弹窗） */
.page-inquiry-list .pick-dialog__hint {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--text-2);
}
.page-inquiry-list .pick-dialog__rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  max-height: 48vh;
  overflow: auto;
  padding-right: var(--sp-1);
}
.page-inquiry-list .pick-row {
  padding: var(--sp-5);
  border: 1px solid var(--n-200);
  border-radius: var(--r-md);
}
.page-inquiry-list .pick-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.page-inquiry-list .pick-row__idx {
  min-width: 16px;
  font-size: var(--fs-12);
  color: var(--text-3);
}
.page-inquiry-list .pick-row__code {
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
}
.page-inquiry-list .pick-row__es {
  font-size: var(--fs-13);
  color: var(--text-2);
}
.page-inquiry-list .pick-row__cn {
  font-size: var(--fs-12);
  color: var(--text-3);
}
.page-inquiry-list .pick-row__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: var(--sp-4) var(--sp-5);
}
.page-inquiry-list .pick-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}
.page-inquiry-list .pick-field--note { grid-column: 1 / -1; }
.page-inquiry-list .pick-field__label {
  font-size: var(--fs-12);
  color: var(--text-3);
}
.page-inquiry-list .pick-field .el-input-number { width: 100%; }
.page-inquiry-list .pick-field__ro {
  display: block;
  min-height: 24px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-sm);
  background-color: var(--n-50);
  font-size: var(--fs-13);
  line-height: 24px;
  font-weight: var(--fw-semibold);
  color: var(--text-1);
}

/* 9.23.4 ≤767 卡片模式：勾选列整列隐藏，卡片仍固定 4 行（Imágenes / Fecha / Cliente / Precio）。
   该列不带 col-m，§10.6 的 td:not(.col-m) 白名单已隐藏；这里再显式声明一次防回归。 */
@media (max-width: 767px) {
  .page-inquiry-list .el-table th.col-sel,
  .page-inquiry-list .el-table td.col-sel { display: none; }
  .page-inquiry-list .pick-bar__hint { display: none; }
  .page-inquiry-list .pick-row__fields { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   §9.24 订货清单 Lista de pedido（.page-orderpick-list 新页）
   ========================================================================== */
.page-orderpick-list .page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.page-orderpick-list .page-head__titles { min-width: 0; }
.page-orderpick-list .page-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  font-size: var(--fs-20);
  line-height: 1.35;
  font-weight: var(--fw-semibold);
  color: var(--text-1);
}
.page-orderpick-list .page-title__cn,
.page-orderpick-list .subtitle-cn {
  font-size: var(--fs-13);
  font-weight: var(--fw-regular);
  color: var(--text-3);
  margin-left: var(--sp-2);
}
.page-orderpick-list .page-subtitle {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-13);
  color: var(--text-2);
}
.page-orderpick-list .page-head__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.page-orderpick-list .page-head__actions .el-button + .el-button { margin-left: 0; }
.page-orderpick-list .page-head__user {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 var(--sp-2);
  font-size: var(--fs-13);
  color: var(--text-2);
}

/* 9.24.1 只读提示条 */
.page-orderpick-list .orderpick-banner {
  margin-bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--warn-200, #F3D19E);
  border-radius: var(--r-md);
  background-color: var(--warn-50, #FDF6EC);
  color: #7A4A00;
  font-size: var(--fs-13);
  line-height: 1.5;
}

/* 9.24.2 工具条 + 备注行 */
.page-orderpick-list .orderpick-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.page-orderpick-list .orderpick-bar__left,
.page-orderpick-list .orderpick-bar__right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.page-orderpick-list .orderpick-bar__count {
  font-size: var(--fs-13);
  color: var(--text-2);
}
.page-orderpick-list .orderpick-bar__count b {
  color: var(--text-1);
  font-weight: var(--fw-semibold);
}
.page-orderpick-list .orderpick-note {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--n-200);
  border-radius: var(--r-md);
  background-color: var(--n-25);
}
.page-orderpick-list .orderpick-note__label {
  font-size: var(--fs-13);
  color: var(--text-2);
  white-space: nowrap;
}
.page-orderpick-list .orderpick-note__input { flex: 1 1 260px; max-width: 520px; }
.page-orderpick-list .orderpick-note__hint {
  font-size: var(--fs-12);
  color: var(--text-3);
}

/* 9.24.3 表格：窄屏横向滚动（本页单元格可编辑，不做卡片折叠） */
.page-orderpick-list .orderpick-tablewrap {
  border: 1px solid var(--n-200);
  border-radius: var(--r-md);
  background-color: var(--n-0);
  overflow-x: auto;
}
.page-orderpick-list .orderpick-num { width: 100%; }
.page-orderpick-list .orderpick-num .el-input__inner { text-align: right; }
/* 列多且可编辑：单元格内边距收紧，输入控件撑满列宽，避免 1440 下超出可视区被裁 */
.page-orderpick-list .orderpick-tablewrap .el-table .cell { padding: 0 var(--sp-2); }
.page-orderpick-list .orderpick-tablewrap .el-table .el-input,
.page-orderpick-list .orderpick-tablewrap .el-table .el-input-number { width: 100%; }
.page-orderpick-list .orderpick-ro {
  display: inline-block;
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
}
.page-orderpick-list .orderpick-code {
  font-size: var(--fs-13);
  color: var(--text-1);
}
.page-orderpick-list .orderpick-muted {
  font-size: var(--fs-12);
  color: var(--text-3);
}
.page-orderpick-list .orderpick-acts {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* 9.24.4 提交结果（SQL）弹窗 */
.page-orderpick-list .orderpick-sqlwarn { margin-bottom: var(--sp-4); }
.page-orderpick-list .orderpick-sql__sum {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin-bottom: var(--sp-4);
}
.page-orderpick-list .orderpick-sql__sum > div {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-12);
  color: var(--text-3);
}
.page-orderpick-list .orderpick-sql__sum strong {
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  color: var(--text-1);
}
.page-orderpick-list .orderpick-sql__warnings {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background-color: var(--warn-50, #FDF6EC);
  color: #7A4A00;
  font-size: var(--fs-12);
  line-height: 1.5;
}
.page-orderpick-list .orderpick-sql {
  max-height: 46vh;
  margin: 0;
  padding: var(--sp-5);
  overflow: auto;
  border-radius: var(--r-md);
  background: #0F172A;
  color: #E2E8F0;
  font-family: ui-monospace, Consolas, 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre;
  tab-size: 2;
}

@media (max-width: 767px) {
  .page-orderpick-list .orderpick-bar,
  .page-orderpick-list .orderpick-note { align-items: stretch; }
  .page-orderpick-list .orderpick-note__input { max-width: none; }
  .page-orderpick-list .orderpick-sql { max-height: 52vh; }
}

/* 9.24.6 订货清单：拼箱行整行淡黄，和非拼箱行区分（拼箱标记本身在「Consolidado 拼箱」列） */
.page-orderpick-list .orderpick-tablewrap .el-table__body tr.is-consolidated > td.el-table__cell {
  background-color: #FFF8EC;
}
.page-orderpick-list .orderpick-tablewrap .el-table__body tr.is-consolidated:hover > td.el-table__cell {
  background-color: #FDF1DC;
}
/* ==========================================================================
   9.6.2 品牌标志（P27）：公司标志 + 「临溪 LINXI」字标
   原来是一颗 24px 蓝色圆角方块 + 文字，现在换成 logo 图（透明底 PNG @2x）。
   ========================================================================== */
.page-login .login-brand__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
}
.page-login .login-brand__logo {
  display: block;
  height: 64px;
  width: auto;
}
.page-login .login-brand__name {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  letter-spacing: .06em;
  color: var(--brand-700);
}
.page-login .login-brand__name-en {
  font-size: var(--fs-11);
  letter-spacing: .16em;
  color: var(--brand-600);
}

@media (max-width: 767px) {
  .page-login .login-brand__logo { height: 48px; }
  .page-login .login-brand__name { font-size: var(--fs-16); }
}