@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Figtree:wght@400;500;600;700&display=swap');

/* ── Variables ─────────────────────────────────── */
.qpm-wrap {
  --teal-800: #0c1e25;
  --teal-700: #0f6b7a;
  --teal-600: #148597;
  --teal-500: #18a0b8;
  --teal-200: #b2e4ed;
  --teal-100: #d8f2f7;
  --teal-50:  #edf9fb;
  --slate-900: #111e24;
  --slate-700: #1b3540;
  --slate-500: #3d606c;
  --slate-400: #5a7880;
  --slate-300: #7d9da6;
  --slate-200: #c0d2d8;
  --slate-100: #e1eaed;
  --slate-50:  #f4f8f9;
  --warm-bg:   #f6f8f7;
  --warm-100:  #eff3f1;
  --white:     #ffffff;
  --gold:      #b8943f;
  --gold-light:#f5edda;
  --font-display: 'Syne', system-ui, sans-serif;
  --font-body:    'Figtree', system-ui, sans-serif;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --shadow-xs: 0 1px 3px rgba(7,32,40,.06);
  --shadow-sm: 0 2px 8px rgba(7,32,40,.07), 0 1px 2px rgba(7,32,40,.04);
  --shadow-md: 0 6px 20px rgba(7,32,40,.09), 0 2px 6px rgba(7,32,40,.05);
  --shadow-lg: 0 14px 40px rgba(7,32,40,.12), 0 4px 10px rgba(7,32,40,.06);
  --shadow-focus: 0 0 0 3px rgba(20,133,151,.2);
  --t-fast: .13s ease;
  --t-base: .2s ease;

  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--slate-900);
  -webkit-font-smoothing: antialiased;
}

/* ── Subnav ────────────────────────────────────── */
.qpm-wrap .qpm-subnav {
  display: flex;
  gap: 2px;
  margin-bottom: 28px;
  padding-bottom: 0;
  border-bottom: 2px solid var(--slate-100);
}

.qpm-wrap .qpm-tab {
  display: inline-block;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--slate-400);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.qpm-wrap .qpm-tab:hover { color: var(--teal-700); }
.qpm-wrap .qpm-tab.active { color: var(--teal-700); border-bottom-color: var(--teal-700); }

/* ── Main ──────────────────────────────────────── */
.qpm-wrap .qpm-main { padding-bottom: 60px; }
.qpm-frontend { width:min(1440px,calc(100% - 36px)); margin:36px auto; }
.qpm-frontend .qpm-main { max-width:none; }
.qpm-wrap .qpm-logout { margin-left:auto; }
.qpm-wrap .qpm-login { max-width:440px; margin:70px auto; padding:32px; background:#fff; border:1px solid var(--slate-100); border-radius:16px; box-shadow:var(--shadow-md); }
.qpm-wrap .qpm-login h2 { margin-top:0; font-family:var(--font-display); }
.qpm-wrap .qpm-login label { display:block; margin:12px 0 5px; font-weight:600; }
.qpm-wrap .qpm-login input[type=text],.qpm-wrap .qpm-login input[type=password] { width:100%; }

/* ── Hero / Section head ───────────────────────── */
.qpm-wrap .hero { display: block; margin-bottom: 32px; }

.qpm-wrap .section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 24px;
}

.qpm-wrap .hero h1,
.qpm-wrap .section-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--slate-900);
  letter-spacing: -.5px;
  line-height: 1.2;
}

.qpm-wrap .hero p { margin: 10px 0 0; color: var(--slate-400); font-size: 15px; }

.qpm-wrap .eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--teal-700);
}

.qpm-wrap .section-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── Category grid ─────────────────────────────── */
.qpm-wrap .category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.qpm-wrap .category-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--slate-100);
  border-radius: var(--radius-md);
  padding: 22px 20px;
  text-decoration: none;
  color: var(--slate-900);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base);
}

.qpm-wrap .category-card::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal-700), var(--teal-500));
  opacity: 0;
  transition: opacity var(--t-base);
}

.qpm-wrap .category-card:hover { box-shadow: var(--shadow-md); border-color: var(--teal-200); transform: translateY(-3px); }
.qpm-wrap .category-card:hover::after { opacity: 1; }

.qpm-wrap .category-card span { font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.qpm-wrap .category-card strong { font-size: 12px; font-weight: 600; color: var(--teal-700); text-transform: uppercase; letter-spacing: .5px; }

.qpm-wrap .all-products-card {
  background: linear-gradient(140deg, var(--teal-800) 0%, var(--teal-700) 60%, #1a9db3 100%) !important;
  border-color: transparent !important; color: var(--white) !important;
}
.qpm-wrap .all-products-card::after { background: linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,.05)) !important; opacity: 1 !important; }
.qpm-wrap .all-products-card:hover { border-color: transparent !important; box-shadow: var(--shadow-lg) !important; }
.qpm-wrap .all-products-card span { color: var(--white) !important; }
.qpm-wrap .all-products-card strong { color: rgba(255,255,255,.65) !important; }

/* ── Product grid ──────────────────────────────── */
.qpm-wrap .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.qpm-wrap .product-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--slate-100);
  border-radius: var(--radius-md);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.qpm-wrap .product-card:hover { box-shadow: var(--shadow-md); border-color: var(--teal-200); transform: translateY(-2px); }

.qpm-wrap .product-card-media { position: relative; aspect-ratio: 4 / 3; background: var(--warm-100); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.qpm-wrap .product-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qpm-wrap .product-card-noimage { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--slate-300); }

.qpm-wrap .product-card-body { display: flex; flex-direction: column; flex-grow: 1; padding: 16px 20px 20px; }

.qpm-wrap .product-card .eyebrow { font-size: 10.5px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.qpm-wrap .product-card-top .status-dot { flex-shrink: 0; }
.qpm-wrap .product-card h2 { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin: 6px 0 5px; letter-spacing: -.2px; line-height: 1.3; }
.qpm-wrap .product-card h2 a { color: var(--slate-900); text-decoration: none; transition: color var(--t-fast); }
.qpm-wrap .product-card h2 a:hover { color: var(--teal-700); }
.qpm-wrap .product-card-body > p { font-size: 13.5px; color: var(--slate-400); margin: 0; flex-grow: 1; }

.qpm-wrap .card-actions { display: flex; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--slate-100); }
.qpm-wrap .card-actions a { flex: 1; text-align: center; font-size: 13px; font-weight: 600; color: var(--slate-400); text-decoration: none; padding: 5px 0; border-radius: var(--radius-xs); transition: color var(--t-fast), background var(--t-fast); }
.qpm-wrap .card-actions a:hover { color: var(--teal-700); background: var(--teal-50); }
.qpm-wrap .card-actions a + a { border-left: 1px solid var(--slate-100); }

.qpm-wrap .card-actions-secondary { display: flex; gap: 8px; margin-top: 8px; }
.qpm-wrap .card-actions-secondary .option-delete-form { flex: 1; margin: 0; }
.qpm-wrap .card-actions-secondary button { width: 100%; min-height: 32px !important; padding: 5px 10px !important; font-size: 12.5px !important; }

.qpm-wrap .button-warn { border: 1px solid #dfc98a !important; background: var(--gold-light) !important; color: var(--gold) !important; border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; transition: background var(--t-fast), color var(--t-fast); }
.qpm-wrap .button-warn:hover { border-color: var(--gold) !important; background: var(--gold) !important; color: #fff !important; }

.qpm-wrap .button-danger { border: 1px solid #e7bcbc !important; background: #fff5f5 !important; color: #a53b3b !important; border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; transition: background var(--t-fast), color var(--t-fast); }
.qpm-wrap .button-danger:hover { border-color: #a53b3b !important; background: #a53b3b !important; color: #fff !important; }

/* ── Toggle de vista (cuadrícula / lista) ──────────
   Todas las propiedades con !important: el tema del sitio (fuera de wp-admin,
   en la página con el shortcode) define su propio estilo genérico para
   "button" con más peso que el nuestro, y sin !important el tema gana: pisa
   el fondo/color/borde y dos botones cuadrados con icono pasan a verse como
   una única píldora sin iconos (icono con el mismo color que el fondo). */
.qpm-wrap .view-toggle { display: flex !important; gap: 2px; background: var(--warm-100) !important; border: none !important; border-radius: var(--radius-sm); padding: 3px !important; }
.qpm-wrap .view-toggle-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; border: none !important; background: transparent !important; border-radius: calc(var(--radius-sm) - 2px); color: var(--slate-400) !important; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.qpm-wrap .view-toggle-btn:hover { color: var(--slate-600) !important; }
.qpm-wrap .view-toggle-btn.is-active { background: var(--white) !important; color: var(--teal-700) !important; box-shadow: var(--shadow-sm); }
.qpm-wrap .view-toggle-btn svg { display: block !important; width: 16px !important; height: 16px !important; flex: none !important; fill: currentColor !important; }

/* ── Vista de lista ───────────────────────────────── */
.qpm-wrap .product-grid.view-list { grid-template-columns: 1fr; gap: 10px; }
.qpm-wrap .view-list .product-card { flex-direction: row; align-items: stretch; }
.qpm-wrap .view-list .product-card:hover { transform: none; }
.qpm-wrap .view-list .product-card-media { width: 96px; flex: 0 0 96px; aspect-ratio: auto; }
.qpm-wrap .view-list .product-card-body { padding: 12px 18px; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 20px; }
.qpm-wrap .view-list .product-card-top { flex: 0 0 auto; width: 170px; }
.qpm-wrap .view-list h2 { margin: 0; flex: 1 1 200px; }
.qpm-wrap .view-list .product-card-body > p { flex: 1 1 220px; }
.qpm-wrap .view-list .product-meta { margin-top: 0; flex: 0 0 auto; }
.qpm-wrap .view-list .card-actions { margin-top: 0; padding-top: 0; border-top: none; flex: 0 0 auto; width: auto; gap: 6px; }
.qpm-wrap .view-list .card-actions a { flex: none; padding: 5px 10px; }
.qpm-wrap .view-list .card-actions a + a { border-left: none; }
@media (max-width: 780px) {
  .qpm-wrap .view-list .product-card { flex-direction: column; }
  .qpm-wrap .view-list .product-card-media { width: 100%; aspect-ratio: 16 / 9; }
  .qpm-wrap .view-list .product-card-body { flex-direction: column; align-items: flex-start; }
  .qpm-wrap .view-list .product-card-top { width: auto; }
}

/* ── Buttons ───────────────────────────────────── */
.qpm-wrap .button,
.qpm-wrap button[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 18px !important;
  border-radius: var(--radius-sm) !important;
  border: 0 !important;
  background: var(--teal-700) !important;
  color: var(--white) !important;
  text-decoration: none !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer;
  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  box-shadow: none !important;
}
.qpm-wrap .button:hover,
.qpm-wrap button[type="submit"]:hover {
  background: var(--teal-800) !important;
  box-shadow: 0 4px 14px rgba(15,107,122,.38) !important;
  transform: translateY(-1px);
  color: var(--white) !important;
}
.qpm-wrap .secondary { background: var(--slate-500) !important; }
.qpm-wrap .secondary:hover { background: var(--slate-700) !important; box-shadow: 0 4px 14px rgba(61,96,108,.32) !important; }

/* ── Filters ───────────────────────────────────── */
.qpm-wrap .filters {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr) auto auto;
  gap: 10px;
  margin-bottom: 22px;
  padding: 14px;
  background: var(--white);
  border: 1px solid var(--slate-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  align-items: center;
}

/* ── Inputs ────────────────────────────────────── */
.qpm-wrap input[type="text"],
.qpm-wrap input[type="email"],
.qpm-wrap input[type="number"],
.qpm-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]),
.qpm-wrap select,
.qpm-wrap textarea {
  width: 100% !important;
  border: 1.5px solid var(--slate-200) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 11px !important;
  background: var(--white) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--slate-900) !important;
  box-shadow: none !important;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.qpm-wrap input:focus,
.qpm-wrap select:focus,
.qpm-wrap textarea:focus {
  border-color: var(--teal-700) !important;
  box-shadow: var(--shadow-focus) !important;
}
.qpm-wrap select {
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a7880' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 34px !important;
}
.qpm-wrap select[multiple] { background-image: none !important; padding-right: 8px !important; min-height: 110px; }
.qpm-wrap textarea { min-height: 90px; resize: vertical; }

/* ── Form Sections ─────────────────────────────── */
.qpm-wrap .editor { background: var(--white); border: 1px solid var(--slate-100); border-radius: var(--radius-md); padding: 28px; box-shadow: var(--shadow-sm); }
.qpm-wrap .form-section { margin-bottom: 18px; }
.qpm-wrap .form-section-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--slate-100); }
.qpm-wrap .form-section-number { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--teal-700); color: var(--white); font-family: var(--font-display); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.qpm-wrap .form-section-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--slate-900); margin: 0 0 2px; }
.qpm-wrap .form-section-desc { font-size: 13px; color: var(--slate-400); margin: 0; }
.qpm-wrap .req { color: var(--teal-600); margin-left: 2px; }

.qpm-wrap .form-grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 18px; }
.qpm-wrap .field label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--slate-400); margin-bottom: 7px; }
.qpm-wrap .field.wide { grid-column: 1 / -1; }
.qpm-wrap .select-new { display: grid; grid-template-columns: 1.2fr 1fr; gap: 8px; }
.qpm-wrap .field small { display: block; margin-top: 5px; font-size: 12px; color: var(--slate-300); }

/* ── Sticky actions ────────────────────────────── */
.qpm-wrap .form-sticky-actions { position: sticky; bottom: 0; z-index: 50; display: flex; gap: 10px; padding: 14px 0 20px; background: linear-gradient(to top, var(--warm-bg) 75%, transparent); }

/* ── Check pills ───────────────────────────────── */
.qpm-wrap .check-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.qpm-wrap .check-pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px; border: 1.5px solid var(--slate-200); border-radius: 20px; background: var(--white); color: var(--slate-500); font-size: 13px; font-weight: 500; cursor: pointer; user-select: none; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
.qpm-wrap .check-pill:hover { border-color: var(--teal-600); color: var(--teal-700); background: var(--teal-50); }
.qpm-wrap .check-pill input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.qpm-wrap .check-pill:has(input:checked) { background: var(--teal-50); border-color: var(--teal-700); color: var(--teal-700); font-weight: 600; box-shadow: inset 0 0 0 1px var(--teal-700); }
.qpm-wrap .check-pill[hidden] { display: none; }
.qpm-wrap .check-pills-search { margin-bottom: 8px; font-size: 13px !important; padding: 7px 11px !important; }
.qpm-wrap .check-pills-empty { margin: 4px 0 0; font-size: 12.5px; color: var(--slate-300); font-style: italic; }

/* ── Quick add (categorías y opciones desde la ficha) ─── */
.qpm-wrap .qpm-quickadd-toggle { margin-left: 6px; border: none; background: none; color: var(--teal-700); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; cursor: pointer; padding: 0; }
.qpm-wrap .qpm-quickadd-toggle:hover { text-decoration: underline; }
.qpm-wrap .qpm-quickadd { margin-top: 8px; padding: 10px; border: 1.5px dashed var(--slate-200); border-radius: var(--radius-sm); background: var(--slate-50); }
.qpm-wrap .qpm-quickadd-input { margin-bottom: 0 !important; }
.qpm-wrap .qpm-quickadd-results:not([hidden]) { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.qpm-wrap .qpm-quickadd-result,
.qpm-wrap .qpm-quickadd-create { display: block; width: 100%; text-align: left; padding: 6px 9px; border: 1px solid var(--slate-200); border-radius: var(--radius-xs); background: var(--white); color: var(--slate-700); font-size: 13px; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.qpm-wrap .qpm-quickadd-result:hover:not(:disabled) { border-color: var(--teal-600); background: var(--teal-50); }
.qpm-wrap .qpm-quickadd-result:disabled { color: var(--slate-300); cursor: not-allowed; font-style: italic; }
.qpm-wrap .qpm-quickadd-create { border-color: var(--teal-700); color: var(--teal-700); font-weight: 600; }
.qpm-wrap .qpm-quickadd-create:hover:not(:disabled) { background: var(--teal-50); }
.qpm-wrap .qpm-quickadd-create:disabled { opacity: .6; cursor: default; }
.qpm-wrap .qpm-quickadd-inline:not(:empty) { margin-top: 6px; }

/* ── Composer de Formatos (cantidad + unidad) ─── */
.qpm-wrap .qpm-format-composer { display: flex; gap: 8px; margin-top: 8px; }
.qpm-wrap .qpm-format-qty { flex: 0 0 110px; }
.qpm-wrap .qpm-format-unit { flex: 0 0 130px; }
.qpm-wrap .qpm-format-add { flex-shrink: 0; white-space: nowrap; }
@media(max-width:600px){ .qpm-wrap .qpm-format-composer { flex-wrap: wrap; } .qpm-wrap .qpm-format-qty,.qpm-wrap .qpm-format-unit { flex: 1 1 45%; } .qpm-wrap .qpm-format-add { flex: 1 1 100%; } }

/* ── Imagen del producto ───────────────────────── */
.qpm-wrap .qpm-image-preview { display: flex; align-items: center; gap: 14px; }
.qpm-wrap .qpm-image-preview img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius-sm); border: 1.5px solid var(--slate-200); background: var(--slate-50); }
.qpm-wrap .qpm-image-empty { display: flex; align-items: center; gap: 10px; }
.qpm-wrap .qpm-image-upload-btn { cursor: pointer; }
.qpm-wrap .qpm-image-status { font-size: 12.5px; color: var(--slate-400); }

/* ── Checkbox ──────────────────────────────────── */
.qpm-wrap .checkbox { display: flex !important; align-items: center; gap: 8px; min-height: 36px; text-transform: none !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--slate-900) !important; }
.qpm-wrap .checkbox input { width: auto !important; min-height: auto !important; }
.qpm-wrap .check-field { align-self: end; }

/* ── Detail sections ───────────────────────────── */
.qpm-wrap .detail-section { margin-bottom: 26px; }
.qpm-wrap .detail-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--slate-400); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--slate-100); }
.qpm-wrap .detail { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.qpm-wrap .detail > div { background: var(--white); border: 1px solid var(--slate-100); border-radius: var(--radius-md); padding: 16px 18px; box-shadow: var(--shadow-xs); }
.qpm-wrap .detail span { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .9px; color: var(--slate-400); margin-bottom: 6px; }
.qpm-wrap .detail p { margin: 0; font-size: 14px; white-space: pre-wrap; color: var(--slate-900); line-height: 1.6; }
.qpm-wrap .detail-empty { background: var(--warm-100) !important; border-style: dashed !important; }
.qpm-wrap .detail-empty span { color: var(--slate-300) !important; }
.qpm-wrap .badge-empty { display: block; font-size: 13px; color: var(--slate-300); font-style: italic; margin: 0; }

/* ── Completion pill ───────────────────────────── */
.qpm-wrap .completion-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 5px 13px; border-radius: 20px; white-space: nowrap; background: var(--teal-50); border: 1px solid var(--teal-200); color: var(--teal-700); }
.qpm-wrap .completion-pill--mid { background: var(--gold-light); border-color: #dfc98a; color: var(--gold); }
.qpm-wrap .completion-pill--low { background: #fff5f5; border-color: #f5c6c6; color: #b84040; }
.qpm-wrap .completion-pill--sm { font-size: 10.5px; padding: 2px 9px; gap: 3px; margin-left: auto; flex-shrink: 0; }

/* ── Panel / Options ───────────────────────────── */
.qpm-wrap .select_options-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.qpm-wrap .panel { background: var(--white); border: 1px solid var(--slate-100); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-sm); }
.qpm-wrap .panel h2 { margin: 0 0 14px; font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--slate-900); padding-bottom: 10px; border-bottom: 1px solid var(--slate-100); }
.qpm-wrap .panel ul { list-style: none; padding: 0; margin: 10px 0 0; }
.qpm-wrap .panel ul li { padding: 6px 0; font-size: 13.5px; color: var(--slate-700); border-bottom: 1px solid var(--warm-100); }
.qpm-wrap .panel ul li:last-child { border-bottom: 0; }
.qpm-wrap .inline-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.qpm-wrap .option-create-form { display:grid; gap:8px; padding-bottom:14px; border-bottom:1px solid var(--slate-100); }
.qpm-wrap .option-create-form select[multiple],.qpm-wrap .option-relation-form select[multiple] { width:100%; min-height:72px; }
.qpm-wrap .option-relation-note { margin:-5px 0 14px; color:var(--slate-400); font-size:12px; }
.qpm-wrap .option-items { display:grid; gap:8px; margin-top:12px; }
.qpm-wrap .option-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--warm-100); font-size:13.5px; }
.qpm-wrap .option-relation-item { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:8px; }
.qpm-wrap .option-relation-form { display:grid; gap:7px; padding:11px; background:var(--warm-100); border-radius:9px; }
.qpm-wrap .option-relation-form strong { font-size:13px; color:var(--slate-900); }
.qpm-wrap .option-relation-form .button { justify-self:start; }
.qpm-wrap .option-delete-form { margin:0; }
.qpm-wrap .option-delete-button { min-height:32px !important; padding:5px 10px !important; border-color:#e7bcbc !important; background:#fff5f5 !important; color:#a53b3b !important; }
.qpm-wrap .option-delete-button:hover { border-color:#a53b3b !important; background:#a53b3b !important; color:#fff !important; }
.qpm-wrap select:disabled { opacity:.55; cursor:not-allowed; background:#f1f2f1; }
.qpm-wrap .qpm-dependency-help { display:block; margin-top:5px; }
.qpm-wrap .options-manager { display:grid; grid-template-columns:260px minmax(0,1fr); gap:20px; align-items:start; }
.qpm-wrap .options-sidebar { position:sticky; top:42px; max-height:calc(100vh - 70px); overflow:auto; background:#fff; border:1px solid var(--slate-100); border-radius:14px; box-shadow:var(--shadow-sm); }
.qpm-wrap .options-sidebar-title { position:sticky; top:0; z-index:2; padding:16px 17px 12px; background:#fff; border-bottom:1px solid var(--slate-100); font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--slate-400); }
.qpm-wrap .options-sidebar nav { padding:7px; }
.qpm-wrap .options-sidebar a { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; padding:9px 10px; border-radius:8px; color:var(--slate-500); text-decoration:none; font-size:13px; line-height:1.25; }
.qpm-wrap .options-sidebar a:hover { background:var(--teal-50); color:var(--teal-700); }
.qpm-wrap .options-sidebar a.active { background:var(--teal-800); color:#fff; font-weight:700; }
.qpm-wrap .options-sidebar a small { display:grid; place-items:center; min-width:24px; height:20px; padding:0 5px; border-radius:999px; background:var(--warm-100); color:var(--slate-400); font-size:10px; }
.qpm-wrap .options-sidebar a.active small { background:rgba(255,255,255,.15); color:#fff; }
.qpm-wrap .options-sidebar-legacy { padding:10px 12px 12px; border-top:1px solid var(--slate-100); } .qpm-wrap .options-sidebar-legacy a { display:block; font-size:11.5px; line-height:1.4; color:var(--slate-400); text-decoration:underline; }
.qpm-wrap .options-detail { min-width:0; background:#fff; border:1px solid var(--slate-100); border-radius:14px; padding:24px; box-shadow:var(--shadow-sm); }
.qpm-wrap .options-detail-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; padding-bottom:18px; border-bottom:1px solid var(--slate-100); }
.qpm-wrap .options-detail-head h2 { margin:4px 0 2px; font:700 25px var(--font-display); }
.qpm-wrap .options-detail-head p { margin:5px 0 0; color:var(--slate-400); }
.qpm-wrap .options-count { flex:none; padding:5px 10px; border-radius:999px; background:var(--teal-50); color:var(--teal-700); font-size:11px; font-weight:700; }
.qpm-wrap .option-create-card { display:grid; grid-template-columns:minmax(180px,.8fr) minmax(220px,1fr) auto; gap:12px; align-items:end; margin:20px 0 26px; padding:17px; border:1px solid var(--teal-200); border-radius:11px; background:var(--teal-50); }
.qpm-wrap .option-create-card>div { align-self:center; }
.qpm-wrap .option-create-card strong,.qpm-wrap .option-create-card small { display:block; }
.qpm-wrap .option-create-card small { color:var(--slate-400); font-size:11px; }
.qpm-wrap .option-create-card select[multiple] { min-height:76px; }
.qpm-wrap .options-table-head { display:grid; grid-template-columns:1fr auto; gap:10px; padding:0 12px 8px; color:var(--slate-400); font-size:10px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; }
.qpm-wrap .option-editor-list { display:grid; gap:9px; }
.qpm-wrap .option-editor-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; align-items:start; padding:12px; border:1px solid var(--slate-100); border-radius:10px; background:var(--warm-bg); }
.qpm-wrap .option-edit-form { display:grid; grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto auto; gap:10px; align-items:end; }
.qpm-wrap .option-edit-form label { display:block; margin-bottom:4px; color:var(--slate-400); font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; }
.qpm-wrap .option-name-input { display:flex; align-items:center; gap:4px; }
.qpm-wrap .option-name-input input { flex:1; }
.qpm-wrap .option-depth-prefix { color:var(--slate-300); font-family:monospace; white-space:nowrap; }
.qpm-wrap .option-parent-field select { width:100%; min-height:64px; }
.qpm-wrap .option-usage { display:flex; gap:5px; align-self:center; flex-wrap:wrap; }
.qpm-wrap .option-usage span { padding:4px 7px; border-radius:999px; background:#fff; color:var(--slate-400); font-size:10px; white-space:nowrap; }
.qpm-wrap .option-editor-row>.option-delete-form { align-self:end; }
.qpm-wrap .option-field-exclusions { grid-column:1/-1; border:1px solid var(--slate-100); border-radius:8px; padding:8px 12px; background:#fff; }
.qpm-wrap .option-field-exclusions summary { cursor:pointer; font-size:11px; font-weight:700; color:var(--slate-400); text-transform:uppercase; letter-spacing:.5px; }
.qpm-wrap .option-field-exclusions .description { margin:8px 0; color:var(--slate-400); font-size:11px; }
.qpm-wrap .option-field-exclusions-group { border:0; margin:0 0 8px; padding:0; display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; }
.qpm-wrap .option-field-exclusions-group legend { width:100%; font-size:10px; font-weight:700; color:var(--slate-300); text-transform:uppercase; letter-spacing:.6px; margin-bottom:4px; padding:0; }
.qpm-wrap .checkbox-inline { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:400; text-transform:none; letter-spacing:normal; color:var(--slate-700); }
.qpm-wrap .checkbox-inline input { margin:0; }

/* ── Flash messages ────────────────────────────── */
.qpm-wrap .flash { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; margin-bottom: 18px; }
.qpm-wrap .flash a { font-weight: 700; margin-left: 4px; }
.qpm-wrap .flash-ok { background: var(--teal-50); border: 1px solid var(--teal-200); color: var(--teal-700); }
.qpm-wrap .flash-error { background: #fff5f5; border: 1px solid #f5c6c6; color: #b84040; }

/* ── Empty state ───────────────────────────────── */
.qpm-wrap .empty { color: var(--slate-400); text-align: center; padding: 48px 20px; font-size: 15px; grid-column: 1 / -1; }

/* ── Responsive ────────────────────────────────── */
@media (max-width: 900px) {
  .qpm-wrap .filters,
  .qpm-wrap .form-grid { grid-template-columns: 1fr; }
  .qpm-wrap .select-new { grid-template-columns: 1fr; }
  .qpm-wrap .section-head { display: block; }
  .qpm-wrap .section-head-actions { margin-top: 12px; }
}

/* ── v2 dashboard and data model ─────────────── */
.qpm-wrap {
  --teal-800: #14251f;
  --teal-700: #1b5a46;
  --teal-600: #24735b;
  --teal-500: #2d8a6d;
  --teal-200: #b9d9cd;
  --teal-100: #dcebe5;
  --teal-50: #eef6f2;
  --warm-bg: #f4f3ee;
  --gold: #9b7a28;
  --gold-light: #f4edda;
}

.qpm-wrap .qpm-main { max-width: 1440px; }
.qpm-wrap .qpm-subnav { gap: 8px; border: 0; margin: 6px 0 26px; }
.qpm-wrap .qpm-tab { background: rgba(255,255,255,.65); border: 1px solid var(--slate-100); border-radius: 999px; padding: 8px 15px; margin: 0; }
.qpm-wrap .qpm-tab.active { background: var(--teal-800); color: #fff; border-color: var(--teal-800); }

.qpm-wrap .dashboard-hero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 30px;
  padding: 38px; margin-bottom: 18px; border-radius: 20px; color: #fff;
  background: radial-gradient(circle at 85% 0, rgba(221,235,91,.28), transparent 28%), linear-gradient(135deg,var(--teal-800),var(--teal-700));
  box-shadow: var(--shadow-lg);
}
.qpm-wrap .dashboard-hero h1 { margin: 7px 0 10px; font: 700 36px/1.05 var(--font-display); color: #fff; }
.qpm-wrap .dashboard-hero p { margin: 0; color: rgba(255,255,255,.72); font-size: 15px; }
.qpm-wrap .dashboard-hero .eyebrow { color: #ddeb5b; }
.qpm-wrap .dashboard-hero .button { background: #ddeb5b !important; color: var(--teal-800) !important; }
.qpm-wrap .metric-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin: 0 0 34px; }
.qpm-wrap .metric-grid article { background:#fff; border:1px solid var(--slate-100); border-radius:14px; padding:19px 20px; box-shadow:var(--shadow-xs); }
.qpm-wrap .metric-grid strong { display:block; font:700 28px var(--font-display); color:var(--teal-800); }
.qpm-wrap .metric-grid span { display:block; margin-top:2px; font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--slate-400); font-weight:700; }
.qpm-wrap .section-head.compact { margin-top: 30px; }
.qpm-wrap .dashboard-note { display:flex; align-items:center; gap:14px; margin-top:22px; background:#fff; border-left:4px solid #ddeb5b; border-radius:10px; padding:16px 18px; box-shadow:var(--shadow-xs); }
.qpm-wrap .dashboard-note span { color:var(--slate-400); flex:1; }
.qpm-wrap .dashboard-note a { font-weight:700; color:var(--teal-700); }

.qpm-wrap .filters-v2 { grid-template-columns: 1.7fr repeat(6,minmax(110px,1fr)) auto auto; }
.qpm-wrap .filters-more { grid-column: 1 / -1; border:1px solid var(--slate-100); border-radius:10px; padding:10px 14px; background:#fff; }
.qpm-wrap .filters-more summary { cursor:pointer; font-size:12px; font-weight:700; color:var(--teal-700); text-transform:uppercase; letter-spacing:.5px; }
.qpm-wrap .filters-more-grid { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.qpm-wrap .filters-more-grid select { min-width:150px; flex:1 1 150px; }
.qpm-wrap .product-card-top { display:flex; gap:8px; align-items:center; flex-wrap: nowrap; }
.qpm-wrap .product-card-top p { margin:0; }
.qpm-wrap .status-dot { width:8px; height:8px; border-radius:50%; background:#b8c1bd; }
.qpm-wrap .status-confirmado { background:#38a06f; box-shadow:0 0 0 3px #e3f4eb; }
.qpm-wrap .status-pendiente-de-validar { background:#d09a31; box-shadow:0 0 0 3px #fbf1dc; }
.qpm-wrap .status-no-publicar { background:#b84040; }
.qpm-wrap .product-meta { display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }
.qpm-wrap .product-meta span,.qpm-wrap .detail-tags span { background:var(--warm-100); border-radius:999px; padding:4px 9px; color:var(--slate-500); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; }

.qpm-wrap .variation-section { border-color: var(--teal-200); background: linear-gradient(180deg,#fff,var(--teal-50)); }
.qpm-wrap .variation-axes { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:16px; padding:13px 15px; background:#fff; border:1px solid var(--slate-100); border-radius:10px; }
.qpm-wrap .variation-axes label { font-size:13px; color:var(--slate-500); }
.qpm-wrap .variation-table-wrap { overflow:auto; margin-bottom:14px; }
.qpm-wrap .variation-table { width:100%; border-collapse:separate; border-spacing:0 7px; }
.qpm-wrap .variation-table th { padding:0 8px 4px; text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.7px; color:var(--slate-400); }
.qpm-wrap .variation-table td { padding:8px; background:#fff; border-top:1px solid var(--slate-100); border-bottom:1px solid var(--slate-100); }
.qpm-wrap .variation-table td:first-child { border-left:1px solid var(--slate-100); border-radius:9px 0 0 9px; text-align:center; }
.qpm-wrap .variation-table td:last-child { border-right:1px solid var(--slate-100); border-radius:0 9px 9px 0; }
.qpm-wrap .variation-table input,.qpm-wrap .variation-table select { min-width:125px; }
.qpm-wrap .variation-table input[type=checkbox] { min-width:auto; }
.qpm-wrap .remove-variation { border:0; background:#fff1f1; color:#a53b3b; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:18px; }

/* ── Formatos de envasado (cantidad + unidad + uds/caja) ─── */
.qpm-wrap .format-table-wrap { overflow:auto; margin-bottom:14px; }
.qpm-wrap .format-table { width:100%; border-collapse:separate; border-spacing:0 7px; }
.qpm-wrap .format-table th { padding:0 8px 4px; text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.7px; color:var(--slate-400); }
.qpm-wrap .format-table td { padding:8px; background:#fff; border-top:1px solid var(--slate-100); border-bottom:1px solid var(--slate-100); }
.qpm-wrap .format-table td:first-child { border-left:1px solid var(--slate-100); border-radius:9px 0 0 9px; }
.qpm-wrap .format-table td:last-child { border-right:1px solid var(--slate-100); border-radius:0 9px 9px 0; }
.qpm-wrap .format-table input,.qpm-wrap .format-table select { min-width:110px; }
.qpm-wrap .technical-grid { grid-template-columns: repeat(3,minmax(180px,1fr)); }

.qpm-wrap .product-detail-head { padding:24px 28px; background:#fff; border:1px solid var(--slate-100); border-radius:16px; box-shadow:var(--shadow-sm); }
.qpm-wrap .detail-tags { display:flex; gap:6px; margin-top:12px; flex-wrap:wrap; }
.qpm-wrap .description-panel { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:28px; }
.qpm-wrap .description-panel>div { padding:20px 22px; background:#fff; border:1px solid var(--slate-100); border-radius:12px; }
.qpm-wrap .description-panel span { font-size:10px; text-transform:uppercase; letter-spacing:.8px; font-weight:700; color:var(--slate-400); }
.qpm-wrap .description-panel p { margin:8px 0 0; color:var(--slate-700); }
.qpm-wrap .variation-summary { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.qpm-wrap .variation-summary article { display:flex; flex-direction:column; padding:15px; background:#fff; border:1px solid var(--slate-100); border-radius:10px; }
.qpm-wrap .variation-summary span,.qpm-wrap .variation-summary small { color:var(--slate-400); }

.qpm-wrap .tool-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.qpm-wrap .tool-card { margin:0; }
.qpm-wrap .tool-card .field { margin-bottom:14px; }
.qpm-wrap .tool-card-danger { border-color:#e7bcbc; background:#fff9f9; }
.qpm-wrap .tool-card-danger .form-section-number { background:#a53b3b; color:#fff; }

@media(max-width:1200px){.qpm-wrap .filters-v2{grid-template-columns:repeat(3,1fr)}.qpm-wrap .technical-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:782px){.qpm-wrap .dashboard-hero{display:block;padding:26px}.qpm-wrap .dashboard-hero .button{margin-top:20px}.qpm-wrap .metric-grid{grid-template-columns:1fr 1fr}.qpm-wrap .tool-grid,.qpm-wrap .description-panel{grid-template-columns:1fr}.qpm-wrap .technical-grid{grid-template-columns:1fr}.qpm-wrap .dashboard-note{align-items:flex-start;flex-direction:column}}
@media(max-width:1050px){.qpm-wrap .option-create-card{grid-template-columns:1fr 1fr}.qpm-wrap .option-create-card>div{grid-column:1/-1}.qpm-wrap .option-edit-form{grid-template-columns:1fr 1fr}.qpm-wrap .option-usage{grid-column:1/-1}}
@media(max-width:782px){.qpm-wrap .options-manager{grid-template-columns:1fr}.qpm-wrap .options-sidebar{position:static;max-height:none}.qpm-wrap .options-sidebar nav{display:flex;overflow:auto}.qpm-wrap .options-sidebar a{flex:0 0 190px}.qpm-wrap .options-detail{padding:17px}.qpm-wrap .option-create-card,.qpm-wrap .option-editor-row,.qpm-wrap .option-edit-form{grid-template-columns:1fr}.qpm-wrap .option-editor-row>.option-delete-form{justify-self:start}.qpm-wrap .options-table-head{display:none}}