/* ============================================================
   app.css — Catalogación IA (THIS IS BP) · Sesión B
   ------------------------------------------------------------
   Capa propia de esta herramienta. Se carga DESPUÉS de
   tokens.css → base.css → shell.css. Reutiliza los tokens del
   ecosistema (NO redefine surfaces ni dark mode: eso vive en
   tokens.css). Contiene:
     1. Base de documento (body, tipografía, --font-mono)
     2. Kit de componentes reutilizado (botones, seg, card, kpi,
        badge, inputs, dtable) — extraído del design system
     3. Componentes NUEVOS de imágenes (uploader, cutout, compare,
        gallery, approval, batch-progress, chips, swatches, stepper)
   ============================================================ */

/* ----- 1. Base de documento ----- */
:root { --font-mono: 'SF Mono', ui-monospace, 'Menlo', 'Roboto Mono', monospace; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--text-1);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, p { margin: 0; }

/* ----- Main content container ----- */
.view {
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-8) var(--sp-12);
}
@media (max-width: 900px) { .view { padding: var(--sp-5) var(--sp-4) var(--sp-10); } }

/* Page header */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4);
}
/* UX2: el div sin clase que envuelve título+subtítulo (ver UI.pageHead) necesita flex-basis propio
   — sin esto, en un padre flex-wrap se angosta al ancho del h1 y el subtítulo wrappea a 2 líneas
   aunque tenga espacio real disponible (medido: 1600px viewport, subtítulo ML wrappeaba). */
.page-head > div:first-child { flex: 1 1 480px; min-width: 0; }
.page-title { font-size: var(--fs-h1); font-weight: var(--fw-bold); letter-spacing: var(--tr-condensed); color: var(--text-1); }
.page-sub { font-size: var(--fs-sm); color: var(--text-3); margin-top: var(--sp-1); max-width: 70ch; line-height: var(--lh-base); }
.page-head-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

.section { margin-bottom: var(--sp-7); }
.section-title { font-size: var(--fs-h2); font-weight: var(--fw-semi); color: var(--text-1); margin-bottom: var(--sp-4); }
.row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--text-3); }
.mono { font-family: var(--font-mono); }
.tabular { font-variant-numeric: tabular-nums; }

/* ----- 2. Kit de componentes ----- */

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: inherit; font-size: var(--fs-body); font-weight: var(--fw-semi);
  padding: 9px 18px; border-radius: var(--r-pill); border: 1px solid transparent;
  background: var(--blue); color: #fff; cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), opacity var(--t-fast);
}
.btn:hover { background: color-mix(in srgb, var(--blue) 88%, #000); text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-lg { padding: 12px 26px; font-size: var(--fs-h3); }
.btn-secondary { background: var(--surface-2); color: var(--text-1); border-color: var(--border); }
.btn-secondary:hover { background: var(--border-soft); }
.btn-ghost {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill);
  color: var(--blue); font-size: var(--fs-sm); font-weight: var(--fw-semi);
  padding: 7px 15px; cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn-ghost:hover { background: var(--blue-soft); border-color: var(--blue-border); text-decoration: none; }
.btn-ghost:disabled { opacity: .45; cursor: not-allowed; }
/* Pestaña activa (#/talento: Modelos/Creadores/Pagos) — mismo .btn-ghost, resaltado sin botón nuevo. */
.btn-ghost-active { background: var(--blue-soft); border-color: var(--blue-border); color: var(--blue); }
/* UX2: tamaño compacto SOLO para el "Editar" por fila de las vistas masivas (junto a .btn-ghost,
   liviano en vez de un botón azul pesado por fila). OJO (code-review): NO definir un `.btn-sm`
   global — esa clase aparece como no-op en 11 call-sites históricos (Pausar/Reactivar/Republicar,
   Confirmar descarte, etc.) y darle estilo los encogería a todos sin review. */
.ml-edit-btn, .aforos-edit-btn, .sgm-edit-btn { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); }
.btn-danger-ghost { color: var(--red); }
.btn-danger-ghost:hover { background: var(--red-soft); border-color: var(--red-border); }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
  color: var(--text-2); cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text-1); }

/* Segmented control */
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 2px; gap: 2px; flex-wrap: wrap; }
.seg button {
  border: none; background: none; cursor: pointer; font: inherit;
  font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-3);
  padding: 6px 14px; border-radius: var(--r-pill);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); white-space: nowrap;
}
.seg button[aria-pressed="true"], .seg button.active { background: var(--surface); color: var(--text-1); box-shadow: var(--sh-1); }
.seg button:hover:not([aria-pressed="true"]):not(.active) { color: var(--text-2); }
.seg button:disabled { opacity: .4; cursor: not-allowed; }

/* Card */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-1); }
.card + .card { margin-top: var(--sp-4); }
.card-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.card-title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-3); text-transform: uppercase; letter-spacing: var(--tr-wide); display: flex; align-items: center; gap: var(--sp-2); }
.card-title .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }

/* KPI */
.kpi-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.kpi { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--sh-1); display: flex; flex-direction: column; gap: var(--sp-1); overflow: hidden; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.kpi.is-ok::before { background: var(--green); }
.kpi.is-warn::before { background: var(--orange); }
.kpi.is-bad::before { background: var(--red); }
.kpi-label { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-3); text-transform: uppercase; letter-spacing: var(--tr-wide); }
.kpi-value { font-family: var(--font-mono); font-size: 24px; font-weight: var(--fw-bold); letter-spacing: var(--tr-condensed); color: var(--text-1); line-height: 1.15; }
.kpi-value.is-ok { color: var(--green); } .kpi-value.is-warn { color: var(--orange); } .kpi-value.is-bad { color: var(--red); }
.kpi-sub { font-size: var(--fs-sm); color: var(--text-3); }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: var(--fw-semi); line-height: 1; padding: 4px 9px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; } /* A4: trunca badges largos */
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.plain::before { display: none; }
.badge-ok { background: var(--green-soft); color: color-mix(in srgb, var(--green) 85%, #000); }
.badge-bad { background: var(--red-soft); color: color-mix(in srgb, var(--red) 85%, #000); }
.badge-warn { background: var(--orange-soft); color: color-mix(in srgb, var(--orange) 88%, #000); }
.badge-info { background: var(--blue-soft); color: color-mix(in srgb, var(--blue) 88%, #000); }
.badge-neutral { background: var(--surface-2); color: var(--text-3); }
[data-theme="dark"] .badge-ok { color: var(--green); }
[data-theme="dark"] .badge-bad { color: var(--red); }
[data-theme="dark"] .badge-warn { color: var(--orange); }
[data-theme="dark"] .badge-info { color: #4da3ff; }

/* Inputs */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field > .seg { align-self: flex-start; } /* A1: seg no hereda stretch del column flex */
.field-label { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-3); text-transform: uppercase; letter-spacing: var(--tr-wide); }
.input, .select, .textarea {
  font-family: inherit; font-size: var(--fs-body); color: var(--text-1);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r);
  padding: 9px 12px; width: 100%; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--blue); box-shadow: var(--sh-focus); }
.textarea { resize: vertical; min-height: 80px; line-height: var(--lh-base); }
.input::placeholder, .textarea::placeholder { color: var(--text-4); }
.search { max-width: 320px; }

/* Tabla */
.tbl-wrap { overflow-x: auto; border-radius: var(--r-lg); }
table.dtable { width: 100%; border-collapse: collapse; }
table.dtable th { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-3); text-transform: uppercase; letter-spacing: var(--tr-wide); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.dtable td { font-size: var(--fs-body); padding: 11px 12px; border-bottom: 1px solid var(--border-soft); text-align: left; color: var(--text-1); }
table.dtable tbody tr:hover td { background: var(--surface-2); }

/* Pendiente / empty */
.pendiente { display: flex; align-items: flex-start; gap: var(--sp-3); background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--r); padding: 14px 16px; color: var(--text-2); font-size: var(--fs-body); line-height: var(--lh-loose); }
.pendiente .ico { font-size: 16px; }
.pendiente b { color: var(--text-1); }
.empty-state { text-align: center; color: var(--text-3); padding: 48px 24px; font-size: var(--fs-body); }
.empty-state .ico { font-size: 32px; opacity: .5; margin-bottom: var(--sp-3); }
.empty-state .empty-title { font-size: var(--fs-h3); font-weight: var(--fw-semi); color: var(--text-2); margin-bottom: var(--sp-1); }

/* Alert strip */
.alert-strip { display: flex; align-items: flex-start; gap: var(--sp-3); border-radius: var(--r); padding: 12px 14px; font-size: var(--fs-body); color: var(--text-1); border: 1px solid var(--border); background: var(--surface-2); }
.alert-strip.warn { background: var(--orange-soft); border-color: var(--orange-border); }
.alert-strip.bad { background: var(--red-soft); border-color: var(--red-border); }
.alert-strip.info { background: var(--blue-soft); border-color: var(--blue-border); }
.alert-strip .ico { font-size: 18px; line-height: 1.2; }
.global-alert { margin: 0 0 var(--sp-4); }
.global-alert .alert-strip { align-items: center; }
.global-alert-txt { flex: 1; }
.alert-strip b { font-weight: var(--fw-semi); }

/* ----- Toast ----- */
#toast-root { position: fixed; top: var(--sp-5); right: var(--sp-5); z-index: 1000; display: flex; flex-direction: column; gap: var(--sp-2); }
.toast { background: var(--elevated); border: 1px solid var(--border); border-left: 3px solid var(--blue); border-radius: var(--r); box-shadow: var(--sh-3); padding: 12px 16px; font-size: var(--fs-body); color: var(--text-1); max-width: 360px; animation: toastIn var(--t-med) var(--ease-out); }
.toast.ok { border-left-color: var(--green); }
.toast.bad { border-left-color: var(--red); }
.toast.warn { border-left-color: var(--orange); }
@keyframes toastIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

/* ----- Spinner ----- */
.spinner { width: 18px; height: 18px; border: 2px solid var(--border-strong); border-top-color: var(--blue); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
.spinner.lg { width: 32px; height: 32px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ----- Sidebar footer (actor / health / budget) ----- */
.s-footer { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) 0; border-top: 1px solid var(--border); margin-top: var(--sp-2); }
.s-actor-label { font-size: var(--fs-micro); font-weight: var(--fw-semi); color: var(--text-3); text-transform: uppercase; letter-spacing: var(--tr-wide); }
.s-user { display: flex; flex-direction: column; gap: var(--sp-1); }
.s-user-name { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-user-btn { align-self: flex-start; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); }
@media (max-width: 1200px) { .s-footer .s-user-name { display: none; } }

/* ----- Pantalla de login (cuenta Microsoft) ----- */
.login-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg-app); padding: var(--sp-4); z-index: 50; }
.login-card { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg, 16px); padding: 40px 36px; max-width: 380px; width: 100%; box-shadow: var(--shadow-md, 0 8px 30px rgba(0,0,0,.08)); }
.login-title { margin: var(--sp-2) 0 0; font-size: 22px; color: var(--text-1); }
.login-sub { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--text-3); }
.login-btn { margin-top: var(--sp-2); }
.login-nota { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); color: var(--text-3); }
.login-aviso { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--text-2); }
.s-status-row { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-3); }
.s-status-row .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-4); flex: 0 0 7px; }
.s-status-row .dot.ok { background: var(--green); }
.s-status-row .dot.bad { background: var(--red); }
.s-status-row .dot.warn { background: var(--orange); }
@media (max-width: 1200px) { .s-footer .s-actor-label, .s-footer .s-status-txt { display: none; } }

/* ============================================================
   3. COMPONENTES NUEVOS — imágenes
   ============================================================ */

/* Checkerboard (transparencia) */
.checker {
  background-color: var(--surface-2);
  background-image:
    linear-gradient(45deg, var(--border) 25%, transparent 25%),
    linear-gradient(-45deg, var(--border) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--border) 75%),
    linear-gradient(-45deg, transparent 75%, var(--border) 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}

/* Stepper */
.stepper { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.step { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-4); }
.step .step-no { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.step.is-active { color: var(--text-1); font-weight: var(--fw-semi); }
.step.is-active .step-no { background: var(--blue); border-color: var(--blue); color: #fff; }
.step.is-done { color: var(--text-2); }
.step.is-done .step-no { background: var(--green-soft); border-color: var(--green-border); color: var(--green); }
.step-sep { width: 18px; height: 1px; background: var(--border); }

/* Bloque del form Generar (disclosure) */
.gen-block { transition: opacity var(--t-med) var(--ease); position: relative; }
.gen-block.is-locked { opacity: .4; pointer-events: none; filter: grayscale(.3); }
/* A5: hint de bloque bloqueado */
.gen-block-lock-hint { font-size: var(--fs-xs); color: var(--text-4); font-style: italic; margin-bottom: var(--sp-3); }

/* Uploader */
.uploader { border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface-2); padding: 36px 24px; text-align: center; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.uploader:hover { border-color: var(--blue-border); }
.uploader.is-dragover { border-color: var(--blue); background: var(--blue-soft); }
.uploader .up-ico { font-size: 30px; opacity: .6; }
.uploader .up-title { font-size: var(--fs-h3); font-weight: var(--fw-semi); color: var(--text-2); }
.uploader .up-hint { font-size: var(--fs-sm); color: var(--text-4); }
.uploader.is-busy { pointer-events: none; opacity: .8; }

/* Source / SKU pick preview */
.source-preview { display: flex; gap: var(--sp-4); align-items: center; }
.source-thumb { width: 120px; height: 120px; border-radius: var(--r); border: 1px solid var(--border); object-fit: cover; background: var(--surface-2); flex: 0 0 120px; }
.source-info { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.source-sku { font-family: var(--font-mono); font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--text-1); }
.source-name { font-size: var(--fs-sm); color: var(--text-2); }

/* Cutout preview */
.cutout-preview { display: flex; flex-direction: column; gap: var(--sp-3); }
.cutout-stage { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-3); display: flex; align-items: center; justify-content: center; min-height: 280px; max-height: 420px; }
.cutout-stage img { max-height: 380px; width: auto; object-fit: contain; border-radius: var(--r-sm); }
.cutout-actions { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }

/* SKU list (catálogo + picker) */
.sku-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
/* A3: picker con scrollbar estilizada */
.sku-picker-scroll { max-height: 320px; overflow-y: auto; margin-top: 12px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.sku-picker-scroll::-webkit-scrollbar { width: 6px; }
.sku-picker-scroll::-webkit-scrollbar-track { background: transparent; }
.sku-picker-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.sku-picker-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-4); }
/* sku-card — catálogo virtual (layout vertical: imagen · identidad · badges · footer) */
/* Base = picker de SKU (galería / generar): thumb chico al lado del texto, en fila. */
.sku-card {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--sp-3);
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  text-align: left;
  width: 100%;
  font-family: inherit;
}
.sku-card:hover { border-color: var(--border-strong); box-shadow: var(--sh-1); }
.sku-card.is-selected { border-color: var(--blue); box-shadow: var(--sh-focus); }
.sku-card .sku-thumb { width: 56px; height: 56px; flex: 0 0 56px; border-radius: var(--r-sm); object-fit: cover; background: var(--surface-2); border: 1px solid var(--border-soft); }
.sku-card .sku-thumb.ph { display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--text-4); }
.sku-card .sku-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }

/* Catálogo (virtualGrid): override "image-forward" — imagen grande arriba, layout en columna.
   Scopeado a .vgrid para NO afectar los pickers de galería/generar que usan .sku-card en fila. */
.vgrid .sku-card { flex-direction: column; align-items: stretch; padding: 0; gap: 0; }

/* Zona 1: imagen protagonista — edge-to-edge, aspect-ratio apparel */
.sku-card .sku-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.sku-card .sku-img.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-4);
}
.sku-card .sku-img.ph::after {
  content: '';
  display: block;
  width: 32px;
  height: 32px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  opacity: .4;
}

/* Overlay tipo de catálogo (SALE / NUEVO) — esquina superior izquierda sobre la imagen.
   La card en .vgrid es position:relative + overflow:hidden, así que el overlay no se escapa. */
.vgrid .sku-card { position: relative; }
.sku-card .sku-type-overlay {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
  pointer-events: none;   /* no interferir con el click de la card */
}
.sku-card .sku-type-badge {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: .03em;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  color: #fff;
  box-shadow: var(--sh-1);
}
.sku-card .sku-type-badge.is-sale { background: var(--red); }
.sku-card .sku-type-badge.is-new  { background: var(--blue); }

/* Zona 2: identidad textual (SKU + nombre) */
.sku-card .sku-identity { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2) var(--sp-3) 0; }
.sku-card .sku-fotos-odoo { margin-top: 3px; }   /* "N fotos" de Odoo, justo debajo del nombre */
.sku-card .sku-code { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-1); line-height: 1.2; }
.sku-card .sku-nm { font-size: var(--fs-xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: var(--lh-snug); }
/* min-height para clamping uniforme en virtualGrid */
.vgrid .sku-card .sku-nm { min-height: 2.4em; }

/* Zona 3: badges — fila compacta de metadata */
.sku-card .sku-badges {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3) 0;
}
/* Estado de fotos por tipo: ecommerce + redes SIEMPRE juntos en una misma línea. */
.sku-card .sku-foto-chips {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: nowrap;
  padding: var(--sp-2) var(--sp-3) 0;
}
.sku-card .sku-foto-chips .badge { flex: 1 1 0; justify-content: center; white-space: nowrap; }

/* Zona 4: footer — seq-row (izq) + stock (der) */
.sku-card .sku-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: nowrap;
  min-width: 0;
  margin-top: auto;
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--border-soft);
}

/* Seq-row: control de orden de catálogo (B2C / B2B) */
.seq-row {
  display: flex;
  flex-direction: column;   /* B2C y B2B apilados, cada uno con su stock al lado */
  align-items: stretch;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.seq-row-label {
  font-size: var(--fs-xs);
  color: var(--text-4);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.seq-field {
  display: flex;
  align-items: center;
  gap: 6px;
}
.seq-field-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-3);
  white-space: nowrap;
  width: 28px;              /* alinea B2C / B2B en columna */
  flex-shrink: 0;
}
/* Stock del depósito del canal, PEGADO a su posición (Eshop↔B2C, D1↔B2B). Pill diferenciado
   del input de posición para que se lea claro cuántas unidades hay en cada depósito. */
.seq-stock {
  font-size: var(--fs-xs);
  color: var(--text-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding: 1px 7px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
}
.seq-stock b { font-weight: var(--fw-bold); color: var(--text-1); }
.seq-input {
  width: 52px;
  padding: 2px 5px;
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  text-align: right;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-1);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  -moz-appearance: textfield;
}
.seq-input::-webkit-inner-spin-button,
.seq-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.seq-input:hover { border-color: var(--border-strong); }
.seq-input:focus { outline: none; border-color: var(--blue); box-shadow: var(--sh-focus); }
.seq-input:disabled { opacity: .5; cursor: not-allowed; }

/* Footer derecha: stock total */
.sku-footer-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* Format chips */
.chip-group { display: flex; flex-direction: column; gap: var(--sp-3); }
.chip-channel { display: flex; flex-direction: column; gap: var(--sp-2); }
.chip-channel-title { font-size: var(--fs-xs); color: var(--text-4); text-transform: uppercase; letter-spacing: var(--tr-wide); }
.chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.chip { font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 7px 15px; cursor: pointer; transition: all var(--t-fast); white-space: nowrap; }
.chip:hover { border-color: var(--border-strong); }
.chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Virtual grid (catálogo a miles de ítems) */
.vgrid { position: relative; width: 100%; }
.vgrid-row { position: absolute; left: 0; right: 0; display: grid; }
.vgrid .sku-card { height: 100%; overflow: hidden; }
/* min-height del nombre ya definido en las reglas de .sku-card arriba */

/* Skeleton shimmer (imagen mientras carga) */
.sku-img.is-loading { background: var(--surface-2); position: relative; overflow: hidden; }
.sku-img.is-loading::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text-4) 18%, transparent), transparent); animation: shimmer 1.2s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* Brand world grid */
.world-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.world-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-4); cursor: pointer; text-align: left; font-family: inherit; transition: border-color var(--t-fast), box-shadow var(--t-fast); display: flex; flex-direction: column; gap: var(--sp-2); }
.world-card:hover { border-color: var(--border-strong); }
.world-card.is-selected { border-color: var(--blue); box-shadow: var(--sh-focus); }
.world-card .world-swatch { height: 54px; border-radius: var(--r-sm); }
.world-card .world-name { font-size: var(--fs-h3); font-weight: var(--fw-semi); color: var(--text-1); }
.world-card .world-desc { font-size: var(--fs-xs); color: var(--text-3); line-height: var(--lh-base); }

/* Hex swatches (packshot bg) */
.hex-swatches { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.hex-sw { width: 44px; height: 44px; border-radius: var(--r); border: 2px solid var(--border); cursor: pointer; position: relative; transition: transform var(--t-fast); }
.hex-sw:hover { transform: scale(1.08); }
.hex-sw.is-selected { border-color: var(--blue); box-shadow: var(--sh-focus); }
.hex-sw.is-selected::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: var(--fw-bold); text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* Batch progress */
.batch-progress { display: flex; flex-direction: column; gap: var(--sp-3); }
.batch-bar-track { height: 8px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; }
.batch-bar-fill { height: 100%; background: var(--blue); border-radius: var(--r-pill); transition: width var(--t-med) var(--ease); }
.batch-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); }
.batch-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.batch-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: var(--fw-semi); padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-3); }
.batch-chip.queued { color: var(--text-3); }
.batch-chip.processing { background: var(--blue-soft); color: color-mix(in srgb, var(--blue) 80%, #000); }
.batch-chip.done { background: var(--green-soft); color: color-mix(in srgb, var(--green) 80%, #000); }
.batch-chip.failed { background: var(--red-soft); color: color-mix(in srgb, var(--red) 80%, #000); }
[data-theme="dark"] .batch-chip.processing { color: #4da3ff; }
[data-theme="dark"] .batch-chip.done { color: var(--green); }
[data-theme="dark"] .batch-chip.failed { color: var(--red); }

/* Gallery grid */
.gallery-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.gallery-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); display: flex; flex-direction: column; }
.gallery-thumb { aspect-ratio: 1; background: var(--surface-2); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; overflow: hidden; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb .g-fmt { position: absolute; top: var(--sp-2); left: var(--sp-2); font-size: var(--fs-micro); font-weight: var(--fw-bold); background: rgba(0,0,0,.6); color: #fff; padding: 2px 7px; border-radius: var(--r-pill); }
.gallery-meta { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.gallery-badges { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.stock-badge { font-variant-numeric: tabular-nums; letter-spacing: 0; }
.gallery-op { font-size: var(--fs-xs); color: var(--text-3); }

/* Comparador */
.compare { display: flex; flex-direction: column; gap: var(--sp-3); }
.compare-stage { border: 1px solid var(--border); border-radius: var(--r-lg); min-height: 320px; max-height: 480px; display: flex; align-items: center; justify-content: center; padding: var(--sp-3); }
.compare-stage img { max-height: 440px; width: auto; object-fit: contain; border-radius: var(--r-sm); }

/* Aprobación */
.approval { display: flex; flex-direction: column; gap: var(--sp-3); }
.approval-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); flex-wrap: wrap; }
.approval-row.is-approved { border-color: var(--green-border); background: var(--green-soft); }
.approval-row.is-rejected { border-color: var(--border); background: var(--surface-2); opacity: .85; }
.reject-form { border-top: 1px solid var(--border); padding-top: var(--sp-3); width: 100%; }
.reject-form label.badge { margin-left: 4px; }
.reject-form input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--blue); }
.gallery-item.is-rejected { opacity: .55; }
.gallery-item.is-rejected .gallery-thumb { filter: grayscale(.6); }
.approval-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.approval-title { font-size: var(--fs-h3); font-weight: var(--fw-semi); color: var(--text-1); }
.approval-meta { font-size: var(--fs-xs); color: var(--text-3); }
.approval-meta b { color: var(--text-2); font-weight: var(--fw-semi); }

/* Modal (detalle version) */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 300; display: flex; align-items: flex-start; justify-content: center; padding: var(--sp-6); overflow-y: auto; animation: fadeIn var(--t-fast); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh-3); width: min(840px, 100%); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.modal-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1.2fr 1fr; }
@media (max-width: 760px) { .modal-grid { grid-template-columns: 1fr; } }
.modal-head-actions { display: flex; gap: var(--sp-2); align-items: center; }

/* Lightbox (visor a pantalla completa con zoom/pan/descarga) */
.lightbox { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.88); display: flex; flex-direction: column; animation: fadeIn var(--t-fast); }
.lightbox-toolbar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); color: #fff; }
.lightbox-toolbar .lb-spacer { flex: 1; }
.lightbox-toolbar .lb-label { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: rgba(255,255,255,.92); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50%; }
.lightbox-toolbar .lb-zoom { font-size: var(--fs-xs); font-family: var(--font-mono); color: rgba(255,255,255,.6); min-width: 44px; text-align: right; }
.lightbox-toolbar .icon-btn { color: #fff; background: rgba(255,255,255,.08); border-color: transparent; text-decoration: none; }
.lightbox-toolbar .icon-btn:hover { background: rgba(255,255,255,.18); }
.lightbox-canvas { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: zoom-out; touch-action: none; }
.lightbox-canvas.is-zoomed { cursor: grab; }
.lightbox-canvas.is-grabbing { cursor: grabbing; }
.lightbox-img { max-width: 94vw; max-height: calc(100vh - 120px); width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; transform-origin: center; will-change: transform; transition: transform var(--t-fast) var(--ease); }
.lightbox-canvas.is-grabbing .lightbox-img { transition: none; }
.lightbox-img.is-pixelated { image-rendering: pixelated; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(255,255,255,.1); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--t-fast); }
.lb-nav:hover { background: rgba(255,255,255,.22); }
.lb-nav.prev { left: var(--sp-4); }
.lb-nav.next { right: var(--sp-4); }
.lb-counter { position: absolute; bottom: var(--sp-4); left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.7); font-size: var(--fs-xs); font-family: var(--font-mono); background: rgba(0,0,0,.4); padding: 4px 12px; border-radius: var(--r-pill); }
.lb-publish { font-size: var(--fs-xs) !important; padding: 0 10px !important; height: 32px; white-space: nowrap; letter-spacing: 0; font-weight: var(--fw-semi); }

/* ---- Publish to Odoo dialog ---- */
.publish-dialog {
  position: fixed;
  z-index: 500;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: var(--sp-4);
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  animation: fadeIn var(--t-fast);
}
.publish-dialog-title { font-size: var(--fs-h3); font-weight: var(--fw-semi); color: var(--text-1); }
.publish-mode-btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: var(--sp-3) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface-2);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.publish-mode-btn:hover { background: var(--blue-soft); border-color: var(--blue-border); }
.publish-mode-btn--danger { border-color: var(--orange-border); background: var(--orange-soft); }
.publish-mode-btn--danger:hover { background: color-mix(in srgb, var(--orange) 16%, transparent); border-color: var(--orange); }
.publish-mode-label { font-size: var(--fs-body); font-weight: var(--fw-semi); color: var(--text-1); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.publish-mode-hint { font-size: var(--fs-xs); color: var(--text-3); line-height: var(--lh-base); }
.publish-dialog-cancel { background: none; border: none; color: var(--text-3); font-size: var(--fs-xs); cursor: pointer; padding: 0; align-self: flex-start; text-decoration: underline; }
.publish-dialog-cancel:hover { color: var(--text-1); }
.publish-dialog-loading { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-3); }
.publish-preview { display: flex; flex-direction: column; gap: 6px; background: var(--surface-2); border-radius: var(--r-sm); padding: var(--sp-3); }
.publish-preview-row { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-xs); }
.publish-preview-key { color: var(--text-3); flex-shrink: 0; }
.publish-preview-val { color: var(--text-1); font-weight: var(--fw-medium); text-align: right; word-break: break-word; }
.publish-dialog-btns { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.publish-dialog-btns .btn, .publish-dialog-btns .btn-ghost { flex: 1; min-width: 100px; text-align: center; justify-content: center; }
.btn-warn { background: var(--orange); border-color: var(--orange); }
.btn-warn:hover { background: color-mix(in srgb, var(--orange) 88%, #000); border-color: color-mix(in srgb, var(--orange) 88%, #000); }

/* Afordancia de "ampliar" en stages */
.compare-stage.is-zoomable, .cutout-stage.is-zoomable, .scene-item.is-zoomable img { cursor: zoom-in; }

/* Cost line / scenes */
.scene-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.scene-item { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.scene-item img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.scene-cost { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); color: var(--text-3); font-family: var(--font-mono); }

/* Palette swatches (brand kit) */
.palette-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.palette-sw { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); }
.palette-sw .sw { width: 48px; height: 48px; border-radius: var(--r); border: 1px solid var(--border); }
.palette-sw .hx { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-3); }

/* term pills */
.term-pills { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.term-pill { font-size: var(--fs-xs); font-weight: var(--fw-semi); padding: 4px 10px; border-radius: var(--r-pill); background: var(--red-soft); color: color-mix(in srgb, var(--red) 85%, #000); text-decoration: line-through; }
[data-theme="dark"] .term-pill { color: var(--red); }

/* Odoo photo grid — galería de fotos reales por producto */
.odoo-photo-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  margin-bottom: var(--sp-6);
}
.odoo-photo-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  cursor: zoom-in;
  border-radius: var(--r);
  transition: transform var(--t-fast) var(--ease);
}
.odoo-photo-item:hover { transform: scale(1.03); }
.odoo-photo-item.is-cover .odoo-photo-thumb {
  border: 2px solid var(--blue);
  border-radius: var(--r);
}
.odoo-photo-thumb {
  aspect-ratio: 1;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.odoo-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.odoo-photo-label {
  font-size: var(--fs-micro);
  color: var(--text-3);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.odoo-photo-item.is-cover .odoo-photo-label {
  color: var(--blue);
  font-weight: var(--fw-semi);
}

/* Selector de fotos fuente — bloque Generar */
.src-img-grid { margin-bottom: var(--sp-2); }
.src-img-item {
  cursor: pointer;
  position: relative;
  outline: none;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.src-img-item:hover { transform: scale(1.03); }
.src-img-item:not(.is-selected) { opacity: .45; }
.src-img-item.is-selected .odoo-photo-thumb {
  border: 2px solid var(--blue);
  border-radius: var(--r);
  box-shadow: var(--sh-focus);
}
/* Check badge */
.src-img-check {
  display: none;
  position: absolute;
  bottom: 5px; right: 5px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: var(--fw-bold);
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.src-img-item.is-selected .src-img-check { display: flex; }

/* Fotos extra subidas al vuelo — sub-sección en bloque Fotos fuente */
.extra-uploads-section {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-soft);
}
.extra-uploads-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--text-2);
  margin-bottom: var(--sp-1);
}
.extra-uploads-hint {
  font-size: var(--fs-xs);
  margin-bottom: var(--sp-3);
}
.src-uploads-grid { margin-bottom: var(--sp-3); }
/* Chip de foto subida — borde naranja para distinguirla de las del catálogo */
.src-upload-chip .odoo-photo-thumb {
  border: 2px solid var(--orange) !important;
  box-shadow: 0 0 0 2px var(--orange-soft);
}
.src-upload-chip.is-selected .src-img-check { display: none; } /* el check lo reemplaza el badge */
/* Botón quitar foto subida */
.src-upload-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 10px;
  font-weight: var(--fw-bold);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  padding: 0;
  transition: background var(--t-fast);
  z-index: 2;
}
.src-upload-remove:hover { background: var(--red); }
/* Label "Subida" debajo del thumb */
.src-upload-label {
  display: flex;
  justify-content: center;
}
.src-upload-badge {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  background: var(--orange-soft);
  color: color-mix(in srgb, var(--orange) 88%, #000);
  border-radius: var(--r-pill);
  padding: 2px 6px;
  white-space: nowrap;
}
[data-theme="dark"] .src-upload-badge { color: var(--orange); }
/* Uploader compacto dentro de la sección extra */
.extra-uploader-wrap .uploader {
  padding: 20px 16px;
}
.extra-uploader-wrap .up-ico { font-size: 22px; }
.extra-uploader-wrap .up-title { font-size: var(--fs-sm); }

/* Pestañas internas en el selector de fotos fuente (Generar) */
.src-tab-bar { margin-bottom: 14px; }
/* Los paneles se muestran/ocultan por style="display:none" directo desde JS */

/* Estado "importando" en items de OneDrive (bloque fuentes) */
.src-img-item.is-importing { opacity: .6; pointer-events: none; }
.src-img-item.is-importing .odoo-photo-thumb { border: 2px solid var(--blue); border-radius: var(--r); animation: pulse-border 1.2s ease-in-out infinite; }
@keyframes pulse-border { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* Select de orden en la barra de filtros del catálogo */
.sort-select { max-width: 160px; }

/* Badge stock total — abajo-derecha del sku-card-footer */
.stock-total-badge {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--text-4);
  line-height: 1;
}
.stock-total-badge.has-stock { color: color-mix(in srgb, var(--blue) 80%, #000); }
[data-theme="dark"] .stock-total-badge.has-stock { color: #4da3ff; }

/* Badge sin foto en el catálogo — destacado */
.cat-no-photo {
  background: var(--orange-soft);
  color: color-mix(in srgb, var(--orange) 88%, #000);
}
[data-theme="dark"] .cat-no-photo { color: var(--orange); }

/* ----- Tabs de secciones (galería SKU) ----- */
.sku-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-6);
  overflow-x: auto;
  scrollbar-width: none;
}
.sku-tabs::-webkit-scrollbar { display: none; }
.sku-tab {
  flex-shrink: 0;
  padding: 8px 16px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  white-space: nowrap;
}
.sku-tab:hover { color: var(--text-1); }
.sku-tab.is-active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  font-weight: var(--fw-semi);
}
.sku-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-3);
  vertical-align: middle;
}
.sku-tab.is-active .sku-tab-badge {
  background: var(--blue-soft);
  color: var(--blue);
}
.sku-tab-panel { display: none; }
.sku-tab-panel.is-active { display: block; }

/* OneDrive grid — misma estructura que odoo-photo-grid */
.onedrive-folder-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--text-2);
  margin: var(--sp-5) 0 var(--sp-3);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}
.onedrive-folder-title .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex-shrink: 0; margin-top: 4px; } /* decorativo — marcador de sección de carpeta */
.pinterest-mock-banner { margin-bottom: var(--sp-4); }
.onedrive-folder-title:first-child { margin-top: 0; }
.onedrive-item {
  position: relative;
  cursor: pointer;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface-2);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.onedrive-item:hover { transform: scale(1.03); box-shadow: var(--sh-2); }
.onedrive-item.no-pointer { cursor: default; }
.onedrive-item.no-pointer:hover { transform: none; box-shadow: none; }
.onedrive-thumb {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.onedrive-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.onedrive-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  color: var(--text-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
}
.onedrive-item-label {
  font-size: var(--fs-xs);
  color: var(--text-2);
  padding: 5px 8px 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* responsive */
@media (max-width: 760px) {
  .modal-grid { grid-template-columns: 1fr; }
  .source-preview { flex-direction: column; align-items: flex-start; }
}

/* --- Curación de imágenes (galería): selección OneDrive + toolbar Fotos Odoo --- */
.onedrive-item.od-item-selected { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--r); }
/* background y border viven acá (no inline) para que la regla .od-item-selected pueda pintar el azul:
   un estilo inline gana por especificidad y bloqueaba el fondo azul al seleccionar. */
.od-check { box-shadow: 0 1px 3px rgba(0,0,0,.2); color: var(--text-1); background: rgba(255,255,255,.92); border: 1px solid var(--border,#ccc); }
.onedrive-item.od-item-selected .od-check { background: var(--blue); color: #fff; border-color: var(--blue); }
.odoo-photo-actions { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
.odoo-photo-actions .icon-btn { width: 28px; height: 28px; padding: 0; }
.odoo-photo-actions .icon-btn[disabled] { opacity: .35; cursor: default; }
.odoo-photo-actions .icon-btn-danger { color: color-mix(in srgb, var(--red) 88%, #000); }
.odoo-photo-actions .icon-btn-danger:hover { background: var(--red-soft); }

/* Folder title con ruta jerárquica (feature A) */
.od-path-ancestors { font-weight: var(--fw-normal); font-size: var(--fs-xs); }
.od-path-leaf { font-weight: var(--fw-semi); }

/* Picker "Mover a…" inline bajo la actionBar (feature B) */
.od-move-picker {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 10px;
  background: var(--blue-soft); border: 1px solid var(--blue-border);
  border-radius: var(--r); font-size: var(--fs-sm);
}
.od-move-picker-select {
  flex: 1; min-width: 200px; max-width: 420px;
  font: inherit; font-size: var(--fs-sm);
  padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); color: var(--text-1); cursor: pointer;
}
.od-move-picker .btn.od-move-go { padding: 7px 16px; font-size: var(--fs-sm); }
.od-move-picker .btn-ghost.od-move-cancel { padding: 7px 14px; font-size: var(--fs-sm); }

/* ---- Pinterest tab ---- */
.pin-header {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-5); min-height: 32px;
}
.pin-board-heading {
  font-size: var(--fs-h3); font-weight: var(--fw-semi); color: var(--text-1);
}

/* Grilla de tableros */
.pin-boards-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.pin-board-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; cursor: pointer; text-align: left; font-family: inherit;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  display: flex; flex-direction: column; padding: 0;
}
.pin-board-card:hover {
  border-color: var(--border-strong); box-shadow: var(--sh-2);
  transform: translateY(-2px);
}
.pin-board-cover {
  width: 100%; aspect-ratio: 1; background: var(--surface-2); overflow: hidden;
}
.pin-board-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pin-board-cover-ph {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--border) 100%);
}
.pin-board-meta {
  padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1);
}
.pin-board-name {
  font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pin-board-count {
  font-size: var(--fs-xs); color: var(--text-3);
}

/* Grilla de pins */
.pin-pins-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  margin-bottom: var(--sp-5);
}
.pin-item {
  display: block; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--border);
  transition: box-shadow var(--t-fast), transform var(--t-fast);
  text-decoration: none;
}
.pin-item:hover {
  box-shadow: var(--sh-2); transform: translateY(-2px); text-decoration: none;
}
.pin-item-img-wrap {
  width: 100%; aspect-ratio: 1; background: var(--surface-2); overflow: hidden;
}
.pin-item-img-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.pin-item-img-ph {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--border) 100%);
}

/* Fila de spinner / cargar más */
.pin-load-more { text-align: center; padding: var(--sp-4) 0; }
.pin-spinner-row { display: flex; justify-content: center; padding: var(--sp-5) 0; }

@media (max-width: 600px) {
  .pin-boards-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .pin-pins-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* ---- Pinterest refs (nuevo flujo OneDrive) ---- */
.pin-ref-meta-row {
  margin-bottom: var(--sp-4);
}

.pin-ref-section {
  margin-bottom: var(--sp-7);
}

.pin-ref-section-header {
  display: flex; align-items: baseline; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}

.pin-ref-section-name {
  font-size: var(--fs-h2); font-weight: var(--fw-semi); color: var(--text-1);
}

.pin-ref-section-count {
  font-size: var(--fs-xs); color: var(--text-3);
}

.pin-ref-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

/* Pin card (seleccionable) */
.pin-ref-card {
  position: relative;
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  display: flex; flex-direction: column;
  user-select: none;
}
.pin-ref-card:hover { border-color: var(--border-strong); box-shadow: var(--sh-2); transform: translateY(-2px); }
.pin-ref-card.is-selected { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 20%, transparent); }
.pin-ref-card.is-unavailable { cursor: not-allowed; }

/* Tick de selección */
.pin-ref-check {
  position: absolute; top: var(--sp-2); right: var(--sp-2);
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue); color: #fff;
  font-size: 12px; font-weight: var(--fw-bold); line-height: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.6);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  pointer-events: none;
}
.pin-ref-card.is-selected .pin-ref-check { opacity: 1; transform: scale(1); }

/* Thumbnail */
.pin-ref-img-wrap {
  width: 100%; aspect-ratio: 1; background: var(--surface-2); overflow: hidden;
}
.pin-ref-img-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-med) var(--ease);
}
.pin-ref-card:hover .pin-ref-img-wrap img { transform: scale(1.04); }

/* Placeholder si la imagen no carga */
.pin-ref-img-ph {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--border) 100%);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-2);
}
.pin-ref-ph-text {
  font-size: var(--fs-xs); color: var(--text-3); text-align: center;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}

/* Meta del pin */
.pin-ref-meta {
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.pin-ref-title {
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: var(--lh-base);
}

/* Estados de importación */
.pin-ref-card.is-importing { opacity: .7; pointer-events: none; }
.pin-ref-card.is-importing::after {
  content: '';
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.pin-ref-card.import-done { border-color: var(--green); }
.pin-ref-card.import-error { border-color: var(--red); }

/* Toolbar flotante de selección */
.pin-ref-toolbar {
  position: sticky; bottom: var(--sp-5); z-index: 100;
  background: var(--elevated); border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-3);
  padding: var(--sp-3) var(--sp-4);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  margin-top: var(--sp-4);
  animation: toastIn var(--t-med) var(--ease-out);
}
.pin-tb-count {
  font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-1);
  white-space: nowrap;
}
.pin-tb-actions {
  display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
}

@media (max-width: 600px) {
  .pin-ref-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .pin-ref-toolbar { border-radius: var(--r-lg); }
}

/* ================================================================
   PINTEREST MOODBOARD — navegación por carpetas (pmb-*)
   ================================================================ */

/* Meta row */
.pmb-meta-row {
  margin-bottom: var(--sp-5);
}

/* ---- Vista CARPETAS ---- */

.pmb-folders-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.pmb-folder-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  padding: 0;
  transition:
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
  display: flex;
  flex-direction: column;
}
.pmb-folder-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--sh-2);
  transform: translateY(-3px);
}

.pmb-folder-cover {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-2);
  flex-shrink: 0;
}
.pmb-folder-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-med) var(--ease);
}
.pmb-folder-card:hover .pmb-folder-cover-img {
  transform: scale(1.05);
}
.pmb-folder-cover-ph {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--border-strong) 100%);
}

.pmb-folder-meta {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.pmb-folder-name {
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pmb-folder-count {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* ---- Vista SECCIÓN ---- */

.pmb-section-header {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.pmb-back-btn {
  flex-shrink: 0;
}
.pmb-section-title-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  flex: 1;
}
.pmb-section-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semi);
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pmb-section-count {
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
  flex-shrink: 0;
}
/* El link usa btn-ghost para consistencia visual; solo override posicional */
.pmb-open-pinterest-link {
  margin-left: auto;
  flex-shrink: 0;
  text-decoration: none;
}
.pmb-open-pinterest-link:hover {
  text-decoration: none;
}

/* Grid de pines — masonry visual via auto-rows cortas */
.pmb-pins-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  align-items: start;
}

/* Pin card */
.pmb-pin-card {
  position: relative;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  user-select: none;
  transition:
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}
.pmb-pin-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--sh-2);
}
.pmb-pin-card.is-selected {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
}
.pmb-pin-card.is-importing { opacity: .7; pointer-events: none; }
.pmb-pin-card.import-done { border-color: var(--green); }
.pmb-pin-card.import-error { border-color: var(--red); }

/* Imagen — click abre lightbox */
.pmb-pin-img-wrap {
  width: 100%;
  aspect-ratio: 1;
  background: var(--surface-2);
  overflow: hidden;
  cursor: zoom-in;
  flex-shrink: 0;
}
.pmb-pin-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-med) var(--ease);
}
.pmb-pin-img-wrap:hover .pmb-pin-img {
  transform: scale(1.05);
}
.pmb-pin-img-ph {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--border) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2);
}
.pmb-pin-ph-text {
  font-size: var(--fs-xs);
  color: var(--text-3);
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Círculo selector — esquina superior izquierda */
.pmb-select-circle {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85);
  background: rgba(255,255,255,.25);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.pmb-select-circle:hover {
  background: rgba(255,255,255,.55);
  transform: scale(1.1);
}
.pmb-pin-card.is-selected .pmb-select-circle {
  background: var(--blue);
  border-color: var(--blue);
}
.pmb-circle-check {
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: #fff;
  line-height: 1;
  opacity: 0;
  transform: scale(.5);
  transition:
    opacity var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}
.pmb-pin-card.is-selected .pmb-circle-check {
  opacity: 1;
  transform: scale(1);
}

/* Meta del pin */
.pmb-pin-meta {
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.pmb-pin-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: var(--lh-base);
}

/* ---- Barra de progreso en toolbar ---- */
.pmb-progress {
  font-size: var(--fs-xs);
  color: var(--blue);
  font-weight: var(--fw-semi);
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* ================================================================
   LIGHTBOX PINTEREST (pmb-lightbox — distinto del .lightbox existente)
   ================================================================ */

.pmb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 450;
  background: rgba(0,0,0,.92);
  display: flex;
  flex-direction: column;
  animation: fadeIn var(--t-fast);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.pmb-lb-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  flex-shrink: 0;
}
.pmb-lb-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: rgba(255,255,255,.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}
.pmb-lb-close {
  background: rgba(255,255,255,.1) !important;
  border-color: transparent !important;
  color: #fff !important;
  flex-shrink: 0;
}
.pmb-lb-close:hover {
  background: rgba(255,255,255,.22) !important;
}

.pmb-lb-canvas {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  cursor: default;
}

.pmb-lb-img-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 92vw;
  max-height: calc(100vh - 72px);
}
.pmb-lb-img {
  max-width: 90vw;
  max-height: calc(100vh - 90px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r);
  box-shadow: 0 8px 48px rgba(0,0,0,.6);
  user-select: none;
  -webkit-user-drag: none;
  animation: pmb-img-in var(--t-med) var(--ease-out);
}
@keyframes pmb-img-in {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: none; }
}
.pmb-lb-img-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 240px;
  background: var(--surface-2);
  border-radius: var(--r);
  color: var(--text-3);
  font-size: var(--fs-sm);
  text-align: center;
  padding: var(--sp-4);
}

/* Botones de navegación (prev/next) */
.pmb-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast);
  z-index: 2;
  padding: 0;
}
.pmb-lb-nav:hover { background: rgba(255,255,255,.22); }
.pmb-lb-prev { left: var(--sp-4); }
.pmb-lb-next { right: var(--sp-4); }

/* Contador de posición (N / total) */
.pmb-lb-counter {
  position: absolute;
  bottom: var(--sp-4);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.6);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  background: rgba(0,0,0,.4);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  pointer-events: none;
}

/* ---- Responsive ---- */
@media (max-width: 700px) {
  .pmb-folders-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .pmb-pins-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .pmb-section-title { font-size: var(--fs-h3); }
  .pmb-lb-nav { display: none; } /* en mobile: swipe o flechas de teclado */
}

/* ================================================================
   EVALUADOR DE CONTENIDO (eval-*)
   ================================================================ */

/* Video preview */
.eval-video-preview {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.eval-video-el {
  width: 100%;
  max-height: 360px;
  border-radius: var(--r-lg);
  background: #000;
  display: block;
  outline: none;
}
.eval-video-meta {
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-family: var(--font-mono);
}

/* Estado processing */
.eval-processing {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6) var(--sp-4);
  gap: var(--sp-5);
}
.eval-processing-txt {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  color: var(--text-2);
}

/* Tabla de tiempos estimados (informativa, bajo la bajada) */
.eval-wait-table { margin: calc(var(--sp-3) * -1) 0 var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); }
.eval-wait-grid { border-collapse: collapse; font-size: var(--fs-xs); color: var(--text-3); max-width: 480px; }
.eval-wait-grid th { text-align: left; font-weight: var(--fw-semi); color: var(--text-4); text-transform: uppercase; letter-spacing: var(--tr-wide); padding: 2px var(--sp-4) 4px 0; }
.eval-wait-grid td { padding: 2px var(--sp-4) 2px 0; color: var(--text-2); font-variant-numeric: tabular-nums; }
.eval-wait-note { font-size: var(--fs-xs); color: var(--text-4); font-style: italic; max-width: 60ch; }

/* Stepper del análisis: que las etapas envuelvan prolijo en mobile */
.eval-stepper { margin-bottom: 0; }
.eval-stepper .step-label { white-space: nowrap; }

/* Barra de progreso del análisis */
.eval-prog-track { height: 8px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; }
.eval-prog-fill {
  height: 100%; background: var(--blue); border-radius: var(--r-pill);
  width: 0%; transition: width var(--t-med) var(--ease);
}
.eval-prog-meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.eval-prog-phase { font-size: var(--fs-body); font-weight: var(--fw-semi); color: var(--text-1); }
.eval-prog-timer { font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; }
.eval-prog-clock { font-variant-numeric: tabular-nums; font-weight: var(--fw-semi); color: var(--text-2); }
.eval-prog-reassure { font-size: var(--fs-sm); color: var(--text-3); line-height: var(--lh-base); max-width: 60ch; }

/* Disclaimer */
.eval-disclaimer {
  margin-bottom: var(--sp-5);
}

/* Hint debajo de un campo */
.field-hint { font-size: var(--fs-xs); color: var(--text-3); line-height: var(--lh-base); }

/* Form de creación: modelo + funnel */
.eval-form-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: var(--sp-5);
}

/* Buscador OneDrive */
.eval-onedrive { display: flex; flex-direction: column; gap: var(--sp-4); }
.eval-od-search-row { display: flex; gap: var(--sp-2); }
.eval-od-search-row .input { flex: 1; }
.eval-od-loading { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-3); padding: var(--sp-4) 0; }
.eval-od-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.eval-od-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.eval-od-card:hover { border-color: var(--blue-border); box-shadow: var(--sh-1); transform: translateY(-1px); }
.eval-od-card.is-importing { opacity: .7; pointer-events: none; }
.eval-od-thumb { aspect-ratio: 16 / 10; background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.eval-od-thumb img { width: 100%; height: 100%; object-fit: cover; }
.eval-od-thumb .onedrive-thumb-placeholder { font-size: 28px; }
.eval-od-info { padding: var(--sp-2) var(--sp-3); display: flex; flex-direction: column; gap: 2px; }
.eval-od-name { font-size: var(--fs-sm); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eval-od-size { font-size: var(--fs-micro); color: var(--text-3); font-family: var(--font-mono); }
.eval-od-status { padding: 0 var(--sp-3) var(--sp-2); min-height: 0; }
.eval-od-status:empty { display: none; }

/* Chips de metadata en resultados */
.eval-result-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.eval-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-1); }
.eval-chip-key { color: var(--text-3); text-transform: uppercase; letter-spacing: var(--tr-wide); font-weight: var(--fw-semi); font-size: var(--fs-micro); }

/* Respuesta neuronal (TRIBE) */
.eval-neural {
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 8%, var(--surface-2)), var(--surface-2));
  border: 1px solid var(--blue-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.eval-neural-head { display: flex; align-items: center; gap: var(--sp-2); }
.eval-neural-ico { font-size: 18px; }
.eval-neural-title { font-size: var(--fs-sm); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--blue); }
.eval-neural-stats { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.eval-neural-stat { display: flex; flex-direction: column; gap: 2px; }
.eval-neural-stat-label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--text-3); font-weight: var(--fw-semi); }
.eval-neural-stat-value { font-family: var(--font-mono); font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--text-1); line-height: 1.1; }
.eval-neural-note { font-size: var(--fs-xs); color: var(--text-3); line-height: var(--lh-base); }
.eval-neural-note b { color: var(--text-2); font-weight: var(--fw-semi); }

/* Reescritura: controles multi-IA */
.eval-rewrite-controls {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  padding: var(--sp-4);
  background: var(--surface-2);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-4);
}
.eval-rewrite-actions { display: flex; }
.eval-rewrite-actions .btn { white-space: nowrap; }

/* Generaciones apiladas de guión */
.script-gen { display: flex; flex-direction: column; gap: var(--sp-3); }
.script-gen + .script-gen { margin-top: var(--sp-2); padding-top: var(--sp-4); border-top: 1px dashed var(--border); }
.script-gen-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.script-gen-num { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--text-2); }
.script-gen-meta { font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--text-3); }

/* Rationale en cada idea */
.script-idea-rationale {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  margin-top: var(--sp-1);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border-soft);
}
.script-idea-rationale-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  flex-shrink: 0;
  width: 80px;
  padding-top: 1px;
}
.script-idea-rationale-text { font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-base); font-style: italic; }

/* Acciones del modal "ya analizado" */
.eval-modal-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.eval-modal-actions .btn, .eval-modal-actions .btn-ghost { flex: 1; min-width: 140px; justify-content: center; text-align: center; }

/* Grid de scorecards — 4 dimensiones en 2×2 (min 240px) */
.score-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin-bottom: var(--sp-5);
}

/* Scorecard individual */
.score-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.score-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.score-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
}
.score-value {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  color: var(--text-1);
  line-height: 1;
}
.score-bar {
  height: 6px;
  background: var(--border);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.score-bar-fill {
  height: 100%;
  border-radius: var(--r-pill);
  transition: width var(--t-slow) var(--ease-out);
}
.score-diagnosis {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: var(--lh-base);
}

/* Veredicto */
.verdict-block {
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
  border: 1px solid;
}
.verdict-block.verdict-high {
  background: var(--green-soft);
  border-color: var(--green-border);
}
.verdict-block.verdict-medium {
  background: var(--orange-soft);
  border-color: var(--orange-border);
}
.verdict-block.verdict-low {
  background: var(--red-soft);
  border-color: var(--red-border);
}
.verdict-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.verdict-badge {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
}
.verdict-block.verdict-high   .verdict-badge { color: color-mix(in srgb, var(--green) 80%, #000); }
.verdict-block.verdict-medium .verdict-badge { color: color-mix(in srgb, var(--orange) 80%, #000); }
.verdict-block.verdict-low    .verdict-badge { color: color-mix(in srgb, var(--red) 80%, #000); }
[data-theme="dark"] .verdict-block.verdict-high   .verdict-badge { color: var(--green); }
[data-theme="dark"] .verdict-block.verdict-medium .verdict-badge { color: var(--orange); }
[data-theme="dark"] .verdict-block.verdict-low    .verdict-badge { color: var(--red); }

.verdict-summary {
  font-size: var(--fs-body);
  color: var(--text-1);
  line-height: var(--lh-loose);
}

/* Recomendaciones */
.reco-section {
  margin-bottom: var(--sp-5);
}
.reco-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  margin-bottom: var(--sp-3);
}
.reco-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  counter-reset: reco;
}
.recommendation-item {
  counter-increment: reco;
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--fs-body);
  color: var(--text-1);
  line-height: var(--lh-base);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-radius: var(--r);
  border-left: 3px solid var(--blue);
}
.recommendation-item::before {
  content: counter(reco);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--blue);
  flex-shrink: 0;
  min-width: 18px;
  line-height: var(--lh-base);
}

/* Sección reescribir guión */
.rewrite-section {
  margin-bottom: var(--sp-5);
}

/* Ideas de guión */
.script-ideas {
  margin-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.script-ideas-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  margin-bottom: var(--sp-1);
}
.script-idea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  box-shadow: var(--sh-1);
}
.script-idea-num {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
}
.script-idea-row {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}
.script-idea-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  flex-shrink: 0;
  width: 80px;
  padding-top: 1px;
}
.script-idea-text {
  font-size: var(--fs-body);
  color: var(--text-1);
  line-height: var(--lh-base);
}

/* Transcript accordion */
.eval-transcript-toggle {
  margin-top: var(--sp-4);
  border-top: 1px solid var(--border-soft);
  padding-top: var(--sp-4);
}
.eval-transcript-summary {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--text-3);
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
}
.eval-transcript-summary::-webkit-details-marker { display: none; }
.eval-transcript-summary::before {
  content: "▶";
  font-size: 10px;
  transition: transform var(--t-fast) var(--ease);
  display: inline-block;
}
details[open] .eval-transcript-summary::before { transform: rotate(90deg); }
.eval-transcript-body {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: var(--lh-loose);
  white-space: pre-wrap;
  background: var(--surface-2);
  border-radius: var(--r);
  padding: var(--sp-4);
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

/* Footer técnico (modelo + costo) */
.eval-tech-footer {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-4);
}

/* Responsive evaluador */
@media (max-width: 720px) {
  .eval-rewrite-controls { grid-template-columns: 1fr; align-items: stretch; }
  .eval-rewrite-actions .btn { width: 100%; }
}
@media (max-width: 600px) {
  .score-grid { grid-template-columns: 1fr 1fr; }
  .script-idea-label, .script-idea-rationale-label { width: 64px; }
}

/* ============================================================
   Editor visual (WYSIWYG) de descripciones — pestaña Descripciones del SKU
   El canvas usa la tipografía REAL de la tienda (DINPro, vendorizada) sobre fondo
   claro → preview fiel. NO se inyecta font-family en el HTML guardado.
   ============================================================ */
@font-face {
  font-family: 'DINPro';
  font-style: normal;
  font-weight: normal;
  src: url('/fonts/dinpro.woff') format('woff');
  font-display: swap;
}

.rte { border: 1px solid var(--border-strong); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.rte-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding: 6px; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.rte-btn {
  min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid transparent; background: none;
  border-radius: var(--r-sm); cursor: pointer; font: inherit; font-size: var(--fs-sm);
  color: var(--text-1); display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.rte-btn:hover { background: var(--surface); border-color: var(--border); }
.rte-btn.active { background: var(--blue-soft); border-color: var(--blue); }
.rte-btn i, .rte-btn b, .rte-btn u { font-style: normal; pointer-events: none; }
.rte-btn i { font-style: italic; }
.rte-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--border); }

/* Canvas de edición = look de la tienda: fondo claro, texto oscuro, DINPro. Fijo (no sigue el tema
   claro/oscuro de la tool) para que sea un preview fiel de cómo lo ve el cliente. */
.rte-editor {
  min-height: 160px; max-height: 460px; overflow-y: auto; padding: 12px 14px;
  background: #fff; color: #141414;
  font-family: 'DINPro', var(--font-sans-serif, sans-serif); font-size: 15px; line-height: 1.5;
  outline: none;
}
.rte-editor:focus { box-shadow: inset 0 0 0 2px var(--blue-soft); }
.rte-editor:empty::before { content: 'Escribí la descripción larga…'; color: #9aa0a6; }
.rte-editor p { margin: 0 0 10px; }
.rte-editor h2 { font-size: 22px; font-weight: 700; margin: 14px 0 8px; }
.rte-editor h3 { font-size: 18px; font-weight: 700; margin: 12px 0 6px; }
.rte-editor ul, .rte-editor ol { margin: 0 0 10px; padding-left: 22px; }
.rte-editor li { margin: 2px 0; }
.rte-editor a { color: #1f6feb; text-decoration: underline; }
.rte-editor blockquote { margin: 10px 0; padding: 4px 12px; border-left: 3px solid #d0d0d0; color: #555; }
.rte-editor hr { border: none; border-top: 1px solid #d0d0d0; margin: 14px 0; }

/* Popovers de color / emoji */
.rte-wrap { position: relative; display: inline-flex; }
.rte-pop {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r);
  box-shadow: var(--sh-2, 0 6px 20px rgba(0,0,0,.18)); padding: 6px; gap: 4px;
}
.rte-pop.open { display: flex; flex-wrap: wrap; width: 168px; }
.rte-pop-item { border: none; background: none; cursor: pointer; padding: 4px; border-radius: var(--r-sm); font-size: 18px; line-height: 1; }
.rte-pop-item:hover { background: var(--surface-2); }
.rte-pop-emoji.open { width: 232px; }
.rte-swatch { display: block; width: 20px; height: 20px; border-radius: 4px; border: 1px solid rgba(0,0,0,.15); }

/* Generador de descripción estructurada (IA) */
.desc-gen { border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 18px; background: var(--surface-2); }
.desc-gen > summary { cursor: pointer; padding: 12px 14px; font-weight: var(--fw-semi); list-style: none; user-select: none; }
.desc-gen > summary::-webkit-details-marker { display: none; }
.desc-gen[open] > summary { border-bottom: 1px solid var(--border); }
.desc-gen-body { padding: 14px; }
.desc-gen-group { padding: 10px 12px; margin-bottom: 10px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-sm); }
.desc-gen-preview { margin-top: 14px; }

/* ── Zonas de campos: locked (Notion) vs maestro (editable, compartido) vs editable (tool) ── */

/* Zona locked: campos que viven en Notion (solo lectura, ej. cuidado/materia prima) */
.maestro-zone { border-radius: var(--r); margin-bottom: 14px; }
.maestro-zone-locked { border: 1px solid var(--border); background: var(--surface-2); padding: 12px 14px; opacity: 0.85; }
.maestro-zone-editable.has-locked-above { border-top: 1px dashed var(--border); padding-top: 12px; }
/* Zona maestro (F3b): editable, sin la apariencia atenuada de la zona locked */
.maestro-zone-dimension { border: 1px solid var(--border); background: var(--surface); padding: 12px 14px; }

/* Encabezado de zona */
.maestro-zone-header { margin-bottom: 10px; }
.maestro-zone-label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-3); text-transform: uppercase; letter-spacing: var(--tr-wide); margin-bottom: 2px; }
.editable-label { color: var(--text-2); }
.maestro-zone-icon { font-size: 14px; line-height: 1; }
.notion-link { display: inline-flex; align-items: center; }

/* Inputs locked: apariencia read-only sin perder .value para get() */
.field-locked-input {
  background: var(--surface-2) !important;
  color: var(--text-3) !important;
  cursor: default !important;
  pointer-events: none;
  border-color: var(--border-soft) !important;
}
.field-locked-nivel { pointer-events: none; opacity: 0.7; }

[data-theme="dark"] .maestro-zone-locked { background: color-mix(in srgb, var(--surface-2) 80%, transparent); }

/* ── Aprobación incremental ── */

/* Checkbox de aprobación por característica */
.approval-field { position: relative; }
.approval-field-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; gap: 8px; }
.approval-cb-wrap { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; flex-shrink: 0; }
.approval-cb { width: 14px; height: 14px; accent-color: var(--green); cursor: pointer; }
.approval-cb-label { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.approval-cb-wrap:has(.approval-cb:checked) .approval-cb-label { color: color-mix(in srgb, var(--green) 75%, #000); font-weight: var(--fw-semi); }
[data-theme="dark"] .approval-cb-wrap:has(.approval-cb:checked) .approval-cb-label { color: var(--green); }

/* Bloque de aprobación masiva */
.approval-block { margin-top: 24px; padding: 14px 16px; border-top: 2px solid var(--green-soft); border-radius: 0 0 var(--r) var(--r); background: var(--surface); }
.approval-block-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.approval-mass-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.approval-mass-btn { font-size: var(--fs-xs); padding: 4px 10px; }

/* Badge de estado del publish */
.approval-status { font-size: var(--fs-xs); font-weight: var(--fw-semi); padding: 3px 8px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-3); white-space: nowrap; }
.approval-status.ok { background: var(--green-soft); color: color-mix(in srgb, var(--green) 80%, #000); }
.approval-status.warn { background: var(--orange-soft); color: color-mix(in srgb, var(--orange) 80%, #000); }
.approval-status.error { background: var(--red-soft); color: color-mix(in srgb, var(--red) 80%, #000); }
.approval-status.saving { background: var(--blue-soft); color: color-mix(in srgb, var(--blue) 80%, #000); }
[data-theme="dark"] .approval-status.ok { color: var(--green); }
[data-theme="dark"] .approval-status.warn { color: var(--orange); }
[data-theme="dark"] .approval-status.error { color: var(--red); }
[data-theme="dark"] .approval-status.saving { color: #4da3ff; }

/* ── Gate de Notion (Ramas B y C): estado bloqueado cuando el SKU no está en Notion ── */
.desc-notion-gate {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.notion-gate-icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 6px;
  opacity: 0.75;
}
.desc-gate-sku {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 1px 5px;
  color: var(--text-1);
}
[data-theme="dark"] .desc-gate-sku {
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}

/* Preview de la descripción aprobada */
.approval-preview { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--border-soft); border-radius: var(--r); background: var(--surface); }
.approval-preview-content { font-size: var(--fs-body); line-height: 1.6; }
/* Estilos para el HTML que devuelve el backend (tibp-acc = accordion estilo Patagonia) */
.approval-preview-content details.tibp-acc { border-bottom: 1px solid var(--border-soft); padding: 10px 0; }
.approval-preview-content details.tibp-acc summary { cursor: pointer; font-weight: var(--fw-semi); font-size: var(--fs-body); list-style: none; display: flex; justify-content: space-between; }
.approval-preview-content details.tibp-acc summary::-webkit-details-marker { display: none; }
.approval-preview-content details.tibp-acc summary::after { content: '+'; color: var(--text-3); }
.approval-preview-content details.tibp-acc[open] summary::after { content: '−'; }
.approval-preview-content details.tibp-acc > *:not(summary) { margin-top: 8px; color: var(--text-2); }

/* ── Logística ──────────────────────────────────────────────────────────────── */
.logi-results { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.logi-result { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 12px; cursor: pointer; }
.logi-result:hover { background: var(--surface-2); border-color: var(--border-strong); }
.logi-result-name { font-size: var(--fs-body); font-weight: var(--fw-semi); color: var(--text-1); }
.logi-result-meta { font-size: var(--fs-xs); color: var(--text-3); }
.logi-card { margin-top: 8px; }
.logi-current { font-size: var(--fs-sm); margin: 8px 0 14px; }
.logi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.logi-field { margin: 0; }
.logi-num { font-size: var(--fs-h2); padding: 12px; text-align: center; }  /* dedos en depósito */
.logi-hint { font-size: var(--fs-xs); margin-top: 8px; }
.logi-panel { margin-top: 14px; }
.logi-vol { font-size: var(--fs-body); margin-bottom: 10px; }
.logi-carriers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.logi-carrier { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; background: var(--surface-2); }
.logi-carrier-head { font-weight: var(--fw-semi); font-size: var(--fs-sm); margin-bottom: 6px; }
.logi-carrier-err { font-size: var(--fs-xs); }
.logi-kv { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-sm); padding: 2px 0; }
.logi-kv-k { font-size: var(--fs-xs); }
.logi-kv-v { font-weight: var(--fw-semi); }
.logi-delta { margin-top: 6px; font-size: var(--fs-sm); display: flex; align-items: center; gap: 8px; }
.logi-delta.is-alert { color: var(--red); font-weight: var(--fw-semi); }
.logi-alert-tag { background: var(--red-soft); color: var(--red); border-radius: var(--r-pill); padding: 1px 8px; font-size: var(--fs-xs); }
.logi-valchip { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); padding: 6px 10px; border-radius: var(--r-sm); margin-top: 8px; }
.logi-valchip.is-ok { background: var(--green-soft); color: var(--green); }
.logi-valchip.is-warn { background: var(--orange-soft); color: var(--orange); }
.logi-valchip-ico { font-weight: var(--fw-bold); }
.logi-ref { margin-top: 10px; border: 1px dashed var(--border-strong); border-radius: var(--r-sm); padding: 8px 12px; }
.logi-ref summary { cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.logi-ref-body { margin-top: 8px; }
@media (min-width: 640px) { .logi-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Copiar de otro SKU (dentro del editor de logistica) ── */
.logi-copy-btn { margin-bottom: 10px; }
.logi-copy-picker { margin-bottom: 10px; }
.logi-copy-results { margin-top: 6px; max-height: 200px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }

/* ── Guía de talles (pestaña del producto) ── */
.sg-editor { max-width: 760px; }
.sg-controls { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: var(--sp-4); }
@media (min-width: 560px) { .sg-controls { grid-template-columns: 1fr 1fr; } }
.sg-select { max-width: 340px; }
.sg-table { margin-top: var(--sp-3); }
/* Talle, ML filtrable, Medida y Largo son SIEMPRE obligatorios (columnas fijas, base = 5). Solo
   "Largo de manga" es condicional (top_pecho + tiene mangas) y agrega una 6ta columna cuando se
   muestra — display:none saca el item del flujo del grid, por eso el template cambia con la clase. */
.sg-row { display: grid; grid-template-columns: minmax(70px, 1fr) minmax(90px, 1fr) minmax(90px, 1.2fr) minmax(80px, 1fr) 40px; gap: 8px; align-items: center; padding: 4px 0; }
.sg-table.sg-show-manga .sg-row { grid-template-columns: minmax(70px, 1fr) minmax(90px, 1fr) minmax(90px, 1.2fr) minmax(80px, 1fr) minmax(80px, 1fr) 40px; }
.sg-head { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-2); text-transform: uppercase; letter-spacing: .02em; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.sg-in { padding: 8px; }
.sg-in-num { text-align: center; }
.sg-col-manga { display: none; }
.sg-table.sg-show-manga .sg-col-manga { display: block; }
/* Gorras (head_circunferencia): talle numérico + circunferencia (cm). Se ocultan filtrable ML, largo y
   manga → el grid queda en 3 columnas (talle, medida, borrar). Mismo truco display:none que .sg-col-manga. */
.sg-table.sg-headwear .sg-row { grid-template-columns: minmax(70px, 1fr) minmax(90px, 1.2fr) 40px; }
.sg-table.sg-headwear .sg-col-ml,
.sg-table.sg-headwear .sg-col-largo,
.sg-table.sg-headwear .sg-col-manga { display: none; }
.sg-del { padding: 4px 8px; color: var(--text-3); }
/* Etiqueta de talle FIJA (no editable) — grillas top_pecho/bottom_cadera/belt_largo: debe leerse
   claramente distinta de un input (chip sólido, no caja con borde) para que no parezca "roto". */
.sg-talle-label { display: flex; align-items: center; justify-content: center; padding: 8px; font-weight: var(--fw-semi); color: var(--text-1); background: var(--surface-2); border-radius: var(--r-sm); border: 1px solid transparent; }
/* Fila "legacy": talle guardado que no matchea la lista fija de la categoría (ej. typo "2XX") —
   se muestra al final con estilo de warning + botón ✕ para limpiarla. */
.sg-talle-label-warn { background: var(--orange-soft); color: var(--orange); border-color: var(--orange); cursor: help; }
.sg-row-legacy { opacity: .92; }
/* Punto sutil: el talle existe como variante en Odoo (hint opcional, no bloqueante). */
.sg-talle-has-odoo::after { content: ' •'; opacity: .55; }
.sg-actions-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: var(--sp-3); }
.sg-extra-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; }
.sg-mangas-toggle { font-weight: var(--fw-medium); }
.sg-actions { margin-top: var(--sp-4); display: flex; align-items: center; }
.sg-copy-block { margin: var(--sp-3) 0; }

/* ── Componente toggle-switch ──────────────────────────────────────────────
   Filtro binario (off = "todos" / on = "solo X"): 1 acción, sin valor
   intermedio → toggle. Si el filtro tiene 3+ estados (incluido "todos"),
   usar <select class="filter-select"> en su lugar (necesita label de estado
   visible). Ver aplicación concreta en aforos.js: "Solo sin aforo Odoo". ── */
.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  user-select: none;
}
.toggle-input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.toggle-track {
  position: relative;
  width: 32px; height: 18px;
  border-radius: var(--r-pill);
  background: var(--border-strong);
  transition: background var(--t-fast) var(--ease);
  flex-shrink: 0;
}
.toggle-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--sh-1);
  transition: transform var(--t-fast) var(--ease);
}
.toggle-input:checked + .toggle-track { background: var(--blue); }
.toggle-input:checked + .toggle-track .toggle-knob { transform: translateX(14px); }
.toggle-input:focus-visible + .toggle-track { outline: 2px solid var(--blue); outline-offset: 1px; }
.toggle-switch:has(.toggle-input:disabled) { opacity: .45; cursor: not-allowed; pointer-events: none; }
.toggle-label { font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-base); }

/* ── Componentes de filtro compartidos (Mercado Libre · Aforos · Talles) ───
   .filter-bar reemplaza .ml-toolbar-row(fila 2)/.aforos-filters/.sgm-filters
   como contenedor de controles. .filter-group agrupa controles relacionados
   y agrega un separador vertical entre grupos adyacentes. ── */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); align-items: center; }
/* UX2: búsqueda acotada (no devora la fila) + selects a medida de su contenido (no columna fija de
   190px) — con esto los filtros entran en menos filas y dejan de verse huérfanos/sueltos. */
.filter-search { flex: 0 1 260px; min-width: 200px; }
.filter-select { flex: 0 1 auto; width: auto; min-width: 0; max-width: 170px; text-overflow: ellipsis; }
.filter-label { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-2); white-space: nowrap; flex-shrink: 0; }
/* El control primario (ej. "Tipo:" en Talles) muestra valores largos ("Gorra/gorro/sombrero —
   Circunferencia") → más presupuesto de ancho que los filtros secundarios. */
.filter-select--primary { font-weight: var(--fw-semi); color: var(--text-1); max-width: 250px; }

.filter-group { display: contents; }
.filter-group + .filter-group::before {
  content: '';
  width: 1px; height: 24px;
  background: var(--border);
  align-self: center;
  flex-shrink: 0;
}

/* UX3: separador vertical explícito e insertable — marca las 3 zonas de la barra
   (buscador · filtros de contenido · orden+limpiar). Mismo trazo que el separador
   automático entre .filter-group, pero como elemento propio para ubicar a mano
   antes/después de bloques que no son .filter-group (ej. el select de Orden). */
.filter-sep { align-self: center; width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }
/* Orden (+ Limpiar) siempre a la derecha de la barra, sea cual sea el ancho de los filtros. */
.filter-sort { margin-left: auto; }

/* ── Componente bulk-bar (base compartida) ──────────────────────────────────
   Común a .ml-bulk-bar/.aforos-bulk-bar/.sgm-bulk-bar: sticky al fondo,
   oculta hasta que hay selección. UX2: oculta = display:none (position:sticky
   NO saca del flujo aunque opacity:0 → sin esto queda un hueco de ~200px
   entre la toolbar y la tabla). La entrada visible es una animación de
   aparición (no una transición continua de opacity, que no dispara con
   display:none→flex). Los deltas de padding/gap quedan en cada clase
   específica (ver abajo). ── */
.bulk-bar { display: none; }
.bulk-bar.is-visible {
  display: flex;
  position: sticky; bottom: 0; left: 0; right: 0;
  background: var(--surface); border-top: 1px solid var(--border-strong);
  box-shadow: 0 -2px 12px rgba(0,0,0,.06); /* sombra "hacia arriba": sin token, literal */
  z-index: 10;
  animation: bulk-in var(--t-fast) var(--ease-out);
}
@keyframes bulk-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Vista Guía de talles masiva (calcada de .aforos-*) ── */
.sgm-bulk-bar {
  padding: var(--sp-3) 14px; flex-direction: column; gap: var(--sp-2);
}
.sgm-bulk-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sgm-bulk-count { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-2); min-width: 110px; }
.sgm-bulk-apply { flex-shrink: 0; }

.sgm-table-wrap { overflow-x: auto; }
.sgm-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.sgm-th { text-align: left; padding: 7px 10px; font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-3); border-bottom: 1px solid var(--border); white-space: nowrap; }
.sgm-th-check { width: 32px; }
.sgm-td { padding: var(--sp-2) 10px; border-bottom: 1px solid var(--border); vertical-align: middle; line-height: var(--lh-snug); }
.sgm-td-sku { font-weight: var(--fw-semi); white-space: nowrap; color: var(--text-1); font-size: var(--fs-xs); }
.sgm-td-name { max-width: 220px; }
.sgm-td-col { white-space: nowrap; color: var(--text-3); font-size: var(--fs-xs); }
.sgm-td-action { white-space: nowrap; text-align: right; }
.sgm-td-check { width: 32px; }
.sgm-row:hover { background: var(--surface-2); }
.sgm-row.is-missing .sgm-td-sku { color: var(--text-3); }
.sgm-chk { cursor: pointer; accent-color: var(--blue); width: 15px; height: 15px; }
.sgm-badge { font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--r-pill); }
.sgm-badge.loaded { background: var(--green-soft); color: var(--green); }
.sgm-badge.missing { background: var(--surface-2); color: var(--text-3); }
.sgm-badge.warn { background: var(--orange-soft); color: var(--orange); cursor: help; }
.sgm-badge-group { display: inline-flex; gap: var(--sp-1); flex-wrap: wrap; }
.sgm-edit-btn { flex-shrink: 0; }
.sgm-empty { padding: 24px; text-align: center; color: var(--text-3); font-size: var(--fs-sm); }
.sgm-count { padding: 8px 0; text-align: center; font-size: var(--fs-xs); color: var(--text-3); }
.sgm-load-more-wrap { margin-top: 10px; display: flex; justify-content: center; }
.sgm-more-btn { width: 100%; max-width: 280px; }

.sgm-inline-editor { background: var(--surface-2); }
.sgm-inline-cell { padding: 0; }
.sgm-inline-wrap { padding: 14px 16px; border-bottom: 2px solid var(--blue); position: relative; }
.sgm-inline-close { position: absolute; top: 10px; right: 12px; font-size: var(--fs-xs); }

/* "Poner al día" (2026-07-28) — reusa .ml-poner-btn/.ml-poner-modal/.ml-poner-body/.ml-poner-lead/
   .ml-poner-stage/.ml-alert/.ml-toolbar/.ml-toolbar-row TAL CUAL (definidas junto a Mercado Libre,
   ver comentario en app.css:2555 — es un patrón de toolbar/modal genérico, no exclusivo de esa
   vista). Acá solo lo propio de esta pestaña: la fila de notas de los 3 carriles no accionables. */
.sgm-poner-notes { display: flex; flex-direction: column; gap: 4px; margin-top: var(--sp-2); }
.sgm-poner-note { font-size: var(--fs-xs); }
.sgm-poner-note-btn { align-self: flex-start; font-size: var(--fs-xs); }

@media (max-width: 640px) {
  .sgm-td-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ── Imagen de guía de talles (F1: render + preview, sin publicación) ──────
   .sc- = size chart. Reusa .field/.field-label/.alert-strip/.badge.badge-warn
   del design system — solo se agrega lo específico del preview y las grillas. ── */
.sc-section { max-width: 620px; }
.sc-title { font-size: var(--fs-h3); font-weight: var(--fw-semi); color: var(--text-1); margin: 0 0 var(--sp-3); }
.sc-controls { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
.sc-template-select { min-width: 220px; }
.sc-template-hint { font-size: var(--fs-xs); }
.sc-error { font-size: var(--fs-sm); }

.sc-preview-zone { margin-top: var(--sp-4); }
.sc-preview-img { display: block; max-width: 100%; border-radius: var(--r); border: 1px solid var(--border); box-shadow: var(--sh-1); }
.sc-preview-meta { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); font-size: var(--fs-xs); }
.sc-stale-badge { margin-left: 2px; }

.sc-odoo-status, .sc-ml-status, .sc-ml-grid-status { margin-top: var(--sp-3); }
.sc-ml-queued-row { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }
.sc-ml-queue-error {
  font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--r-pill); cursor: help;
  background: var(--red-soft); color: color-mix(in srgb, var(--red) 85%, #000);
}
[data-theme="dark"] .sc-ml-queue-error { color: var(--red); }
.sc-publish-row { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }

/* Barra de generación masiva (dentro de .sgm-bulk-bar, debajo de .sgm-bulk-rows) */
.sc-bulk-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: var(--sp-2); margin-top: var(--sp-1); }
.sc-progress { font-size: var(--fs-xs); }

.sc-bulk-results { margin-top: var(--sp-3); }
.sc-thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--sp-3);
}
.sc-thumb-card { display: flex; flex-direction: column; gap: 4px; color: var(--text-2); text-decoration: none; }
.sc-thumb-card:hover .sc-thumb-caption { color: var(--blue); }
.sc-thumb-img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
.sc-thumb-caption { font-size: var(--fs-xs); line-height: var(--lh-snug); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sc-error-list { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: 4px; }
.sc-error-row { font-size: var(--fs-xs); color: color-mix(in srgb, var(--red) 85%, #000); background: var(--red-soft); border: 1px solid var(--red-border); border-radius: var(--r-sm); padding: 6px 10px; }
[data-theme="dark"] .sc-error-row { color: var(--red); }

/* Resultados de "Publicar en Odoo" masivo (F2) — filas ok/error, mismo contenedor que la generación */
.sc-result-list { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: 4px; }
.sc-ok-row { font-size: var(--fs-xs); color: color-mix(in srgb, var(--green) 85%, #000); background: var(--green-soft); border: 1px solid var(--green-border); border-radius: var(--r-sm); padding: 6px 10px; }
[data-theme="dark"] .sc-ok-row { color: var(--green); }

/* Modales "Publicar en Odoo"/"Publicar en ML" individuales — angostos, poco contenido */
.sc-odoo-modal { max-width: 480px; }
.sc-ml-modal { max-width: 480px; }

/* Modal "Publicar pendientes" masivo (guía de talles, #/talles) — Odoo + ML en un solo modal con
   dos secciones (antes eran dos modales separados, .sc-odoo-bulk-modal/.sc-ml-bulk-modal). */
.sc-publish-bulk-modal { max-width: 640px; }

/* ── Vista Aforos ── */
/* Barra de acción masiva (sticky al fondo, oculta por defecto) */
.aforos-bulk-bar {
  /* sin `display` propio: lo gobierna .bulk-bar/.is-visible (declararlo acá pisaría el
     display:none de la base y la barra oculta volvería a ocupar ~200px de layout) */
  padding: 10px 14px; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
}
.aforos-bulk-count { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-2); min-width: 110px; }
.aforos-bulk-fields { display: flex; gap: 6px; flex-wrap: wrap; }
.aforos-bulk-label { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); }
.aforos-bulk-inp { width: 80px; font-size: var(--fs-sm); padding: 6px 8px; text-align: center; }
.aforos-bulk-apply { flex-shrink: 0; }

/* Tabla */
.aforos-table-wrap { overflow-x: auto; }
.aforos-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.aforos-th { text-align: left; padding: 7px 10px; font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-3); border-bottom: 1px solid var(--border); white-space: nowrap; }
.aforos-th-check { width: 32px; }
.aforos-td { padding: var(--sp-2) 10px; border-bottom: 1px solid var(--border); vertical-align: middle; line-height: var(--lh-snug); }
.aforos-td.celda-falta { color: var(--orange); background: color-mix(in srgb, var(--orange-soft) 55%, transparent); text-align: center; }
.aforos-td-sku { font-weight: var(--fw-semi); white-space: nowrap; color: var(--text-1); font-size: var(--fs-xs); }
.aforos-td-name { max-width: 220px; }
.aforos-td-col { white-space: nowrap; color: var(--text-3); font-size: var(--fs-xs); }
.aforos-td-num { text-align: right; white-space: nowrap; }
.aforos-td-stock.is-zero { color: var(--text-3); }
.aforos-info { cursor: help; color: var(--text-3); font-size: var(--fs-xs); user-select: none; }
.aforos-info:hover { color: var(--accent, var(--text-2)); }
.aforos-td-aviso { white-space: nowrap; }
.aforos-td-action { white-space: nowrap; text-align: right; }
.aforos-td-check { width: 32px; }
.aforos-row:hover { background: var(--surface-2); }
.aforos-row.is-missing .aforos-td-sku { color: var(--text-3); }
.aforos-chk { cursor: pointer; accent-color: var(--blue); width: 15px; height: 15px; }
.aforos-badge { font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--r-pill); }
.aforos-badge.loaded { background: var(--green-soft); color: var(--green); }
.aforos-badge.missing { background: var(--surface-2); color: var(--text-3); }
.aforos-warn-chip { font-size: var(--fs-xs); background: var(--orange-soft); color: var(--orange); border-radius: var(--r-pill); padding: 2px 8px; white-space: nowrap; }
.aforos-edit-btn { flex-shrink: 0; }
.aforos-empty { padding: 24px; text-align: center; color: var(--text-3); font-size: var(--fs-sm); }
.aforos-count { padding: 8px 0; text-align: center; font-size: var(--fs-xs); color: var(--text-3); }
.aforos-load-more-wrap { margin-top: 10px; display: flex; justify-content: center; }
.aforos-more-btn { width: 100%; max-width: 280px; }

/* Editor inline (acordeón bajo la fila) */
.aforos-inline-editor { background: var(--surface-2); }
.aforos-inline-cell { padding: 0; }
.aforos-inline-wrap { padding: 14px 16px; border-bottom: 2px solid var(--blue); position: relative; }
.aforos-inline-close { position: absolute; top: 10px; right: 12px; font-size: var(--fs-xs); }

@media (max-width: 640px) {
  .aforos-bulk-fields { gap: 4px; }
  .aforos-bulk-inp { width: 66px; }
  .aforos-td-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ── Banner de alarma (Aforos) ── */
.aforos-alarm-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 14px;
  background: var(--orange-soft); border: 1px solid var(--orange-border);
  border-radius: var(--r-sm); font-size: var(--fs-sm);
}
.aforos-alarm-ico { font-size: var(--fs-h3); line-height: 1; flex-shrink: 0; }
.aforos-alarm-text { flex: 1; color: var(--text-1); font-weight: var(--fw-semi); }
.aforos-alarm-ver {
  background: var(--orange); color: #fff; border-color: transparent;
  padding: 5px 14px; font-size: var(--fs-xs); flex-shrink: 0;
}
.aforos-alarm-ver:hover { background: color-mix(in srgb, var(--orange) 85%, #000); }

/* ── Chip "sin aforo Odoo" por fila ── */
.aforos-aviso-chips { display: flex; flex-direction: column; gap: 3px; }
.aforos-odoo-missing-chip {
  font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--red-soft); color: color-mix(in srgb, var(--red) 85%, #000); white-space: nowrap;
  cursor: help;
}
[data-theme="dark"] .aforos-odoo-missing-chip { color: var(--red); }
.aforos-opp-chip {
  font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--blue-soft); color: color-mix(in srgb, var(--blue) 85%, #000); white-space: nowrap;
  cursor: help;
}
[data-theme="dark"] .aforos-opp-chip { color: var(--blue); }
.aforos-opp-chip.is-far { background: var(--surface-2); color: var(--text-2); }
/* ── Sub-tabs (Aforos) ── */
.aforos-tab-bar {
  display: flex; gap: var(--sp-1); margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border); padding-bottom: 0;
}
.aforos-tab {
  font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semi);
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-3); cursor: pointer; padding: 8px 14px; margin-bottom: -1px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.aforos-tab:hover { color: var(--text-1); }
.aforos-tab.is-active { color: var(--blue); border-bottom-color: var(--blue); }

/* ── Aforos típicos ── */
.aforos-typical-help {
  font-size: var(--fs-xs); margin-bottom: 4px; line-height: var(--lh-base);
}
.aforos-th-r { text-align: right; }
.aforos-typical-row:hover { background: var(--surface-2); }
.aforos-typical-neg { color: var(--text-2); }
.aforos-typical-saving { color: var(--green); font-weight: var(--fw-semi); }

/* ── Vista Mercado Libre (calcada de .aforos-*/.sgm-*) ── */
/* Toolbar v2: 2 filas (fila 1 = búsqueda + contador, .ml-toolbar-row; fila 2 = filter-bar con
   filter-group[Rubro·Stock·Orden] | filter-group[Estado ML·Checks·Envío gratis·Cuotas] | Limpiar) */
.ml-toolbar { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-3); }
/* UX2: el contador va PEGADO a la búsqueda (mismo bloque flex, sin margin-left:auto que lo manda
   lejos a la derecha del ancho total de la fila) — .filter-search ya está acotado (260px) así que
   el texto queda inmediatamente después, no flotando en un desierto de espacio muerto. */
.ml-toolbar-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.ml-result-counter { font-size: var(--fs-xs); white-space: nowrap; flex-shrink: 0; }
/* Aviso de drift: publicaciones con ediciones sin enviar a ML. Naranja (mismo token que el chip
   `● pendiente` de cada fila, para que se lean como lo mismo), pero es un BOTÓN — filtra al hacer
   clic, de ahí el cursor pointer en vez del `help` del chip. Oculto cuando no hay pendientes. */
.ml-pending-badge {
  font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--orange-soft); color: var(--orange);
  border: 1px solid transparent; cursor: pointer; flex-shrink: 0;
}
.ml-pending-badge:hover { border-color: var(--orange); }
/* UX3: el margin-left:auto vive en .filter-sort (el Orden) — Limpiar solo va pegado después. */
.ml-clear-btn { flex-shrink: 0; }

/* Barra de acción masiva (sticky al fondo, oculta por defecto) */
.ml-bulk-bar {
  /* sin `display` propio — ver nota en .aforos-bulk-bar */
  padding: 10px 14px; align-items: center; flex-wrap: wrap; gap: 10px;
}
.ml-bulk-count { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-2); min-width: 110px; }
.ml-bulk-fields { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ml-bulk-inp { width: 140px; font-size: var(--fs-sm); padding: 6px 8px; }
.ml-bulk-apply { flex-shrink: 0; }

/* ── Simplificación del panel: botón primario "Poner al día" + semáforo + menú "Más" + modales ── */
.ml-poner-btn { flex-shrink: 0; white-space: nowrap; }
.ml-poner-btn:disabled { opacity: .45; cursor: not-allowed; }
/* Botón "Actualizar desde Notion" como ghost (mismo peso que Limpiar, no compite con el btn primario) */
.ml-notion-refresh-btn { flex-shrink: 0; white-space: nowrap; }

/* Semáforo: fila de chips bajo la toolbar. Chip con count 0 no se renderiza (lo decide el JS);
   si no queda ninguno, :empty oculta la fila para no dejar un hueco. */
.ml-semaforo { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.ml-semaforo:empty { display: none; margin: 0; }
.ml-chip {
  font-size: var(--fs-xs); font-weight: var(--fw-semi); padding: 3px 10px; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap; line-height: 1.5;
  background: var(--surface-2); color: var(--text-2);
}
.ml-chip:hover { filter: brightness(0.97); }
.ml-chip.is-inert, .ml-chip.is-inert:hover { cursor: default; filter: none; }
/* Chip primario ⚡ ("por poner al día"): más peso visual que los chips-filtro — abre el flujo principal */
.ml-chip.primary { background: var(--blue-soft); color: var(--blue); border-color: var(--blue-border); font-weight: var(--fw-bold); }
.ml-chip.pending { background: var(--orange-soft); color: var(--orange); }
.ml-chip.pending:hover { border-color: var(--orange); }
.ml-chip.neutral { background: var(--surface-2); color: var(--text-2); border-color: var(--border); }
.ml-chip.warn { background: var(--orange-soft); color: var(--orange); }
.ml-chip.ready { background: var(--green-soft); color: var(--green); }
.ml-chip.unknown { background: var(--surface-2); color: var(--text-4); }

/* Menú "Más ▾" de la barra de selección.
   Por defecto abre hacia ABAJO (bulk-bar en flujo normal, contenido corto).
   Clase .open-up la agrega openMasMenu() cuando la barra está pegada al fondo del viewport
   (sticky activo) — en ese caso abre hacia ARRIBA para no quedar fuera del viewport.
   z-index: 50 > z-index: 10 del bulk-bar para salir de su stacking context. */
.ml-mas-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.ml-mas-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 50; min-width: 240px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r);
  box-shadow: var(--sh-3); padding: 4px; display: flex; flex-direction: column; gap: 1px;
  max-height: 220px; overflow-y: auto;
}
.ml-mas-menu.open-up { top: auto; bottom: calc(100% + 4px); }
.ml-mas-item {
  text-align: left; background: none; border: none; cursor: pointer; padding: 9px 12px;
  border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--text-1); white-space: nowrap;
}
.ml-mas-item:hover { background: var(--surface-2); }

/* Modal "Aplicar campos…" (los 5 campos bulk, relocados desde la barra) */
.ml-aplicar-modal { width: min(560px, 100%); }
.ml-aplicar-fields { display: flex; flex-direction: column; gap: var(--sp-2); }
.ml-aplicar-fields .ml-bulk-inp { width: 100%; }

/* Modal "Poner al día" (plan del dry_run → reporte de la ejecución) */
.ml-poner-modal { width: min(600px, 100%); }
.ml-poner-body { display: flex; flex-direction: column; gap: var(--sp-2); }
.ml-poner-lead { font-size: var(--fs-body); color: var(--text-1); line-height: var(--lh-base); margin-bottom: var(--sp-2); }
.ml-poner-stage { font-size: var(--fs-sm); }
.ml-poner-stage-line { padding: 3px 0; color: var(--text-1); }
.ml-poner-stage.has-err .ml-poner-stage-line { color: var(--orange); font-weight: var(--fw-semi); }

/* Tabla */
.ml-table-wrap { overflow-x: auto; }
.ml-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.ml-th { text-align: left; padding: 5px 7px; font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-3); border-bottom: 1px solid var(--border); white-space: nowrap; }
.ml-th-check { width: 32px; }
.ml-th-r { text-align: right; }
.ml-td { padding: 4px 7px; border-bottom: 1px solid var(--border); vertical-align: middle; line-height: var(--lh-snug); }
.ml-td-sku { font-weight: var(--fw-semi); white-space: nowrap; color: var(--text-1); font-size: var(--fs-xs); }
.ml-td-name { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-td-col { white-space: nowrap; color: var(--text-3); font-size: var(--fs-xs); }
.ml-td-num { text-align: right; white-space: nowrap; }
.ml-td-action { white-space: nowrap; text-align: right; }
.ml-td-check { width: 32px; }
.ml-row:hover { background: var(--surface-2); }
.ml-row.is-missing .ml-td-sku { color: var(--text-3); }
.ml-chk { cursor: pointer; accent-color: var(--blue); width: 15px; height: 15px; }

/* Columna "Foto" en la tabla masiva */
.ml-td-foto { width: 40px; }
.ml-thumb { display: block; width: 32px; height: 32px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2); }
.ml-thumb-empty { display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: var(--fs-xs); }
.ml-badge-link { text-decoration: none; }
.ml-badge-link:hover { text-decoration: underline; }

/* Badges de estado ML — componibles (publicado + pendiente pueden coexistir) */
.ml-badge-group { display: inline-flex; gap: var(--sp-1); flex-wrap: wrap; }
.ml-badge { font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap; }
.ml-badge.loaded { background: var(--green-soft); color: var(--green); }
.ml-badge.missing { background: var(--surface-2); color: var(--text-3); }
.ml-badge.pending { background: var(--orange-soft); color: var(--orange); cursor: help; }
.ml-badge.unknown { background: var(--surface-2); color: var(--text-4); cursor: help; }
/* Sub-estado real de la publicación en ML (activa/pausada/cerrada/en revisión) — pedido explícito
   de colores por estado. Amarillo y "negro" no tienen token semántico en tokens.css (solo hay
   verde/rojo/naranja/azul), así que van fijos acá (no dependen de claro/oscuro, a propósito: un
   estado "cerrada" debe leerse igual de apagado en ambos temas). */
.ml-badge.status-active { background: var(--green-soft); color: var(--green); }
.ml-badge.status-paused { background: color-mix(in srgb, #ffcc00 15%, transparent); color: #b38600; }
.ml-badge.status-closed { background: #3a3a3c; color: #f5f5f7; }
.ml-badge.status-review { background: var(--blue-soft); color: var(--blue); }
/* #b38600 (marrón oscuro) da bajo contraste sobre fondo oscuro — mismo patrón que .badge-warn
   (línea ~138/143): texto oscurecido en claro, color puro/brillante en dark. */
[data-theme="dark"] .ml-badge.status-paused { color: #ffcc00; }

/* Pill de checks en la columna "Checks" de la tabla masiva */
.ml-check-pill { font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap; font-weight: var(--fw-semi); }
.ml-check-pill.ok { background: var(--green-soft); color: var(--green); }
.ml-check-pill.warn { background: var(--orange-soft); color: var(--orange); }
.ml-check-pill-clickable:hover { filter: brightness(0.95); }

.ml-edit-btn { flex-shrink: 0; }
.ml-empty { padding: 24px; text-align: center; color: var(--text-3); font-size: var(--fs-sm); }
.ml-count { padding: 8px 0; text-align: center; font-size: var(--fs-xs); color: var(--text-3); }
.ml-load-more-wrap { margin-top: 10px; display: flex; justify-content: center; }
.ml-more-btn { width: 100%; max-width: 280px; }

/* Editor inline (acordeón bajo la fila) */
.ml-inline-editor { background: var(--surface-2); }
.ml-inline-cell { padding: 0; }
.ml-inline-wrap { padding: 14px 16px; border-bottom: 2px solid var(--blue); position: relative; }
.ml-inline-close { position: absolute; top: 10px; right: 12px; font-size: var(--fs-xs); }
/* align-items: start — evita que la celda alta "Categoría ML" estire a su mismo alto las celdas
   cortas (Título/Markup/Envío/Cuotas), que quedan así en su alto natural sin vacío debajo. */
.ml-editor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-2); align-items: start; }
.ml-editor-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); }
/* FIX B: altura mínima del label = 2 líneas × --lh-base (1.4) para que los inputs de una
   misma fila arranquen todos a la misma Y, aunque el label sea de 1 línea o de 2+badges.
   Valor: calc(var(--lh-base) * 2em) = 1.4 × 2 × 12px = 33.6px a --fs-sm.
   Los flex items de un contenedor column son blockificados: min-height aplica sin display:block. */
.ml-editor-grid .ml-editor-field > span:first-child { min-height: calc(var(--lh-base) * 2em); }
.ml-editor-footer { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: var(--sp-4); }

/* Preview de precio en vivo dentro del editor */
.ml-preview { font-size: var(--fs-xs); margin-top: 2px; line-height: var(--lh-base); }

/* Contador de caracteres del título ML — rojo si se pasa de 60 (no debería, el sugerido ya viene capado) */
.ml-titulo-count { color: var(--text-3); font-weight: var(--fw-regular); font-size: var(--fs-xs); }
.ml-titulo-count.is-over { color: var(--red); font-weight: var(--fw-semi); }

/* Atributos dinámicos clave/valor (gap de filas compacto: 6px→4px) */
.ml-attr-block { margin-top: 16px; }
.ml-attr-rows { display: flex; flex-direction: column; gap: 4px; }
.ml-attr-row { display: grid; grid-template-columns: 1fr 1fr 32px; gap: var(--sp-2); align-items: center; }

/* Botón "Publicar selección" (F3, alta de ítems nuevos en ML) — habilitado dinámicamente según
   eligiblesParaPublicar(); el estilo "apagado" aplica solo cuando está deshabilitado. */
.ml-publish-wrap { display: inline-flex; align-items: center; gap: 8px; }
.ml-publish-btn:disabled { opacity: .55; cursor: not-allowed; }
.ml-publish-wrap .muted { font-size: var(--fs-xs); }

/* ── F3: modal "Publicar en Mercado Libre" (alta de ítem nuevo, revisión uno por uno) ── */
.ml-pub-modal { width: min(720px, 100%); }
.ml-pub-body { display: flex; flex-direction: column; gap: var(--sp-2); }
.ml-pub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-5); }
.ml-pub-field { display: flex; flex-direction: column; gap: 4px; }
.ml-pub-var-wrap { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-md); margin-top: var(--sp-2); }
.ml-pub-var-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.ml-pub-var-table th { text-align: left; padding: 6px 10px; background: var(--surface-2); position: sticky; top: 0; }
.ml-pub-var-table td { padding: 6px 10px; border-top: 1px solid var(--border); }
.ml-pub-result-checks { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.ml-alert.bad { background: var(--red-soft); border-color: var(--red-border); }
.ml-alert.ml-alert-ok { background: var(--green-soft); border-color: var(--green-border); }

/* ── Publicación masiva (modal-tabla de revisión → progreso, ≥2 elegibles) ── */
.ml-pubbulk-modal { width: min(1120px, 100%); }
.ml-pubbulk-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.ml-pubbulk-globalbar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ml-pubbulk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Scroll vertical PROPIO de la tabla (no del modal entero) — con 100+ filas el modal se mantiene
   navegable sin que el header/barra global/footer se vayan fuera de vista. */
.ml-pubbulk-tablewrap { max-height: 46vh; overflow-y: auto; }

/* ── Editor compartido window.MELI (mercado_libre_editor.js) ──────────────── */
.ml-editor { display: flex; flex-direction: column; gap: var(--sp-5); }
/* .is-compact = editor embebido por fila en la vista masiva #/mercado-libre (el que se expande
   por producto) — es el caso de mayor volumen de uso, se prioriza densidad sobre aire. */
.ml-editor.is-compact { gap: var(--sp-2); }
/* Las .section internas del editor (directas o dentro de .ml-editor-row-2) NO suman su propio
   margin-bottom (var(--sp-7)=28px): el espaciado entre secciones lo da SOLO el gap del flex/grid
   de arriba (evita doble espaciado). Descendant (no solo child directo) para cubrir las que
   viven dentro de .ml-editor-row-2. */
.ml-editor .section { margin-bottom: 0; }
/* Titulares de sección (.field-label) más chicos en el editor — ya son fs-xs (11px) en el resto
   de la app; acá bajan un escalón más (fs-micro=10px), sobre todo relevante en .is-compact donde
   se repiten 4-5 veces por producto expandido. */
.ml-editor .field-label { font-size: var(--fs-micro); }

/* Precios + Foto lado a lado: Precios (grilla 2×2) se lleva más ancho; Foto (thumb 120px)
   se acomoda en su columna. Ratio 2fr/0.8fr da ~560px a Precios en ancho real de 920px —
   suficiente para que la grilla 2×2 tenga tarjetas de ~270px y el chip nunca desborde.
   Apila en pantallas angostas (ver media query ≤760px). */
.ml-editor-row-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(180px, 0.8fr); gap: var(--sp-4); align-items: start; }
.ml-editor.is-compact .ml-editor-row-2 { gap: var(--sp-3); }

/* Sección 1 — Checklist de publicación */
.ml-checklist-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ml-badge-ready { font-size: var(--fs-sm); font-weight: var(--fw-semi); padding: 4px 12px; border-radius: var(--r-pill); white-space: nowrap; }
.ml-badge-ready.is-ready { background: var(--green-soft); color: var(--green); }
.ml-badge-ready.is-missing { background: var(--orange-soft); color: var(--orange); }
.ml-checklist { display: flex; flex-wrap: wrap; gap: 6px; }
.ml-check-chip { font-size: var(--fs-xs); padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap; border: 1px solid transparent; }
.ml-check-chip.ok { background: var(--green-soft); color: var(--green); }
.ml-check-chip.bad { background: var(--surface-2); color: var(--text-3); border-color: var(--border); }
.ml-check-chip.bad.is-clickable { cursor: pointer; }
.ml-check-chip.bad.is-clickable:hover { background: var(--orange-soft); color: var(--orange); border-color: var(--orange-border); }

/* Sección 2 — Precios: grilla fija 2×2 (LISTA+SALE / PROPUESTO+REAL). Fija en vez de auto-fit
   para evitar que en la columna angosta de .ml-editor-row-2 los 4 slots queden en una sola fila
   ultraangosta. 2×2 equilibra alturas: fila 1 corta (LISTA/SALE), fila 2 más alta (PROPUESTO
   ML lleva desglose + chip) pero REAL la acompaña con contenido similar. min-width:0 en cada
   slot es la red de seguridad que impide que el contenido desborde el grid item. */
.ml-prices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-items: start; }
.ml-price-slot { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); min-width: 0; }
.ml-price-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .02em; }
.ml-price-amount { font-size: var(--fs-h3); font-weight: var(--fw-semi); color: var(--text-1); }
.ml-price-sub { font-size: var(--fs-xs); color: var(--text-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* V5: emparejado con el resto de los slots (mismo border/background) + acento sutil a la
   izquierda en vez del destaque azul lleno de antes (pedido de Fernando — "le molesta"). */
.ml-price-propuesto { border-left: 3px solid var(--blue); }
.ml-price-status { font-size: var(--fs-xs); padding: 1px 7px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); white-space: nowrap; }
.ml-price-status.status-active { background: var(--green-soft); color: var(--green); border-color: transparent; }
.ml-price-status.status-paused { background: var(--orange-soft); color: var(--orange); border-color: transparent; }
.ml-price-status.status-closed { background: var(--red-soft); color: var(--red); border-color: transparent; }
.ml-price-link { font-size: var(--fs-xs); color: var(--blue); text-decoration: none; }
.ml-price-link:hover { text-decoration: underline; }
.ml-price-warn { font-size: var(--fs-xs); line-height: var(--lh-base); }
.ml-price-hint { margin-top: 8px; }

/* V5 — markup sugerido: desglose vivo + chip ok/fuera/unset (calcado de .ml-check-pill).
   El chip es una PÍLDORA corta ("sin markup", "✓ 35%", "35% vs 48%") → nowrap: en la celda "ML
   propuesto" de la tabla masiva el texto largo lo rompía en 2 líneas y se encimaba con la fila de
   abajo (bug en prod). El desglose largo del EDITOR sí necesita envolver → se restaura scoped en
   .ml-price-propuesto más abajo. */
.ml-markup-desglose { display: block; width: 100%; overflow-wrap: break-word; }
.ml-markup-chip { font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap; font-weight: var(--fw-semi); }
.ml-markup-chip:empty { display: none; }
.ml-markup-chip.ok { background: var(--green-soft); color: var(--green); }
.ml-markup-chip.fuera { background: var(--orange-soft); color: var(--orange); }
.ml-markup-chip.unset { background: var(--surface); color: var(--text-3); border: 1px solid var(--border); }
/* Editor (tarjeta "Propuesto ML" angosta): el chip lleva texto largo ("✓ en línea con el sugerido
   (35%)") → ahí SÍ envuelve. Scoped para no reintroducir el overflow que el nowrap de arriba arregla
   en la tabla. */
.ml-price-propuesto .ml-markup-chip { white-space: normal; overflow-wrap: break-word; }
.ml-use-sugerido-btn { font-size: var(--fs-xs); padding: 0 6px; height: auto; line-height: 1.6; }

/* Sección 3 — Foto principal para ML: layout vertical (FIX D).
   Antes era fila horizontal [thumb 56px | meta | botón a la derecha]; el alto libre de la
   columna angosta de .ml-editor-row-2 quedaba desperdiciado y el botón era ilegible.
   Ahora: thumb más grande (120px) / meta / acciones en fila propia — aprovecha el alto
   disponible y el botón "Elegir otra foto" queda bajo la imagen. */
.ml-photo-current-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; align-items: flex-start; }
.ml-photo-current-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r); border: 1px solid var(--border); flex-shrink: 0; }
/* thumb-lg: 120×120 para aprovechar el alto libre de la columna Foto en .ml-editor-row-2 */
.ml-photo-current-thumb-lg { width: 120px; height: 120px; border-radius: var(--r); }
.ml-photo-current-meta { font-size: var(--fs-sm); }
/* Fila de botones (revertBtn + toggleBtn) bajo la imagen */
.ml-photo-current-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ml-photo-picker { margin-top: 10px; display: flex; flex-direction: column; gap: 18px; }
.ml-photo-source-title { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-3); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px; }
.ml-photo-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); margin-bottom: 0; }
.ml-photo-item { cursor: pointer; }
.ml-photo-item.is-selected .odoo-photo-thumb,
.odoo-photo-thumb.is-selected { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--r); }

/* Sección 4 — Parámetros: reusa .ml-editor-grid/.ml-attr-*/.ml-editor-footer/.ml-preview de la V1 */
.ml-cat-suggest { margin-top: 4px; }
.ml-suggest-chip { display: inline-block; font-size: var(--fs-xs); padding: 2px 9px; border-radius: var(--r-pill); background: var(--blue-soft); color: var(--blue); cursor: pointer; border: 1px solid var(--blue-border); }
.ml-suggest-chip:hover { filter: brightness(0.97); }
.ml-suggest-chip.blocked { background: var(--orange-soft); color: var(--orange); border-color: var(--orange-border); cursor: default; }

/* Alert-strip genérica del módulo ML (mismo patrón visual de .alert-strip) */
.ml-alert { display: flex; align-items: flex-start; gap: var(--sp-3); border-radius: var(--r); padding: 12px 14px; font-size: var(--fs-body); color: var(--text-1); border: 1px solid var(--border); background: var(--surface-2); }
.ml-alert.warn { background: var(--orange-soft); border-color: var(--orange-border); }
.ml-alert .ico { font-size: 18px; line-height: 1.2; }

/* Banner "ya publicado" arriba del editor — mismo patrón visual, con el link de "Ver publicación" abajo del texto */
.ml-published-banner { padding: 10px 12px; }
.ml-published-banner .ml-price-link { display: inline-block; margin-top: 4px; }

/* SKU/EAN + Atributos lado a lado (aprovecha el ancho libre del editor) */
.ml-editor-side-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); align-items: start; }
.ml-editor-side-grid .ml-attr-block { margin-top: 0; }

/* Bloque read-only (SKU/EAN) dentro de la sección de parámetros — padding/margin compactos */
.ml-readonly-block { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); line-height: var(--lh-base); }

/* ── V4: pausar/reactivar, categoría efectiva + predictor, hint de título ─────────── */
.fs-xs { font-size: var(--fs-xs); }

/* Badge ámbar "sin categoría" en la columna Categoría ML (reusa el patrón .ml-badge) */
.ml-badge.warn { background: var(--orange-soft); color: var(--orange); }

/* Categoría efectiva en la vista masiva: sugerida = muted + cursiva (sin confirmar) */
.ml-cat-eff.is-sugerida { color: var(--text-3); font-style: italic; }

/* Nombre resuelto + hint + buscador + chips de predicción en el editor */
.ml-cat-name { font-size: var(--fs-xs); margin-top: 2px; }
.ml-cat-hint { margin-top: 2px; line-height: var(--lh-base); }
.ml-cat-search { margin-top: 6px; }
.ml-cat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* Buscador manual de categoría — colapsado por defecto detrás de un link de texto (ahorra
   ~55px de la celda "Categoría ML"); el contenido (.ml-cat-search + .ml-cat-chips) sigue
   existiendo en el DOM y funcionando, solo el wrapper que los contiene arranca oculto. */
.ml-cat-search-toggle { font-size: var(--fs-xs); color: var(--blue); background: none; border: none; padding: 0; margin-top: 4px; cursor: pointer; text-decoration: none; display: inline-block; }
.ml-cat-search-toggle:hover { text-decoration: underline; }
.ml-cat-search-wrap .ml-cat-search { margin-top: 4px; }

/* .ml-titulo-hint: ver definición consolidada (con ellipsis) más abajo, junto a las reglas
   de densidad de .is-compact. */

/* Botones pausar/reactivar del banner "ya publicado" */
.ml-status-action { margin-top: 6px; }
.ml-status-note { margin-top: 4px; font-size: var(--fs-xs); line-height: var(--lh-snug); }
.ml-status-btn-pause { background: var(--orange-soft); color: var(--orange); border-color: var(--orange-border); }
.ml-status-btn-pause:hover { background: color-mix(in srgb, var(--orange-soft) 80%, var(--orange) 20%); }
.ml-status-btn-resume { background: var(--green-soft); color: var(--green); border-color: var(--green-border); }
.ml-status-btn-resume:hover { background: color-mix(in srgb, var(--green-soft) 80%, var(--green) 20%); }
/* Republicar (relist de una cerrada): azul = acción constructiva, distinta de pausar/reactivar */
.ml-status-btn-relist { background: var(--blue-soft); color: var(--blue); border-color: var(--blue-border); }
.ml-status-btn-relist:hover { background: color-mix(in srgb, var(--blue-soft) 80%, var(--blue) 20%); }

/* ── Ficha técnica ML (Etapa 2b) — window.MELI buildFichaSection/buildAttrField ──────────── */
.ml-ficha-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.ml-ficha-grid { margin-top: 0; }
.ml-ficha-control { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ml-ficha-control > :first-child { flex: 1 1 160px; min-width: 140px; }
.ml-ficha-numunit { display: flex; gap: 6px; flex: 1 1 160px; min-width: 140px; }
.ml-ficha-num { flex: 1; min-width: 70px; }
.ml-ficha-unit { width: 90px; flex-shrink: 0; }
.ml-ficha-chip { flex-shrink: 0; }
.ml-ficha-req { color: var(--red); margin-left: 2px; }
.ml-ficha-req-cond { color: var(--orange); margin-left: 2px; cursor: help; }
.ml-ficha-badge { font-size: var(--fs-xs); padding: 1px 6px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border); margin-left: 6px; white-space: nowrap; }
.ml-ficha-badge-auto { font-style: italic; opacity: 0.75; cursor: help; }
.ml-ficha-more { margin-top: var(--sp-2); }
.ml-ficha-more summary { cursor: pointer; color: var(--blue); font-weight: var(--fw-semi); font-size: var(--fs-sm); padding: 4px 0; list-style: none; }
.ml-ficha-more summary::-webkit-details-marker { display: none; }
.ml-ficha-more[open] summary { margin-bottom: var(--sp-2); }

/* Etapa E3 — atributos fijos de negocio (Condición/IVA): texto estático, no un control. */
.ml-ficha-locked-value { padding: 6px 0; font-size: var(--fs-sm); }
.ml-ficha-synced { margin-top: 2px; }
.ml-ficha-cta-btn, .ml-ficha-retry-btn { margin-top: 8px; }
.ml-ficha-push-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.ml-ficha-push-row .ml-ficha-synced { margin-top: 0; }

/* Hints largos de la sección 4 (título) — 1 línea con ellipsis, texto completo en `title` (hover).
   Antes eran párrafos de 2-3 líneas de texto muted por producto expandido. */
.ml-titulo-hint { font-size: var(--fs-xs); margin-top: 2px; line-height: var(--lh-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; cursor: help; }

/* .is-compact (editor embebido en la vista masiva) — densidad extra sobre el resto de secciones,
   más allá del gap general de arriba: heads/footers/grillas con menos aire vertical. */
.ml-editor.is-compact .ml-checklist-head { margin-bottom: 6px; }
.ml-editor.is-compact .ml-editor-grid { margin-top: 4px; gap: var(--sp-2); }
.ml-editor.is-compact .ml-editor-footer { margin-top: var(--sp-3); }
.ml-editor.is-compact .ml-ficha-body { gap: var(--sp-2); }
.ml-editor.is-compact .ml-editor-side-grid { margin-top: 4px; padding-top: 4px; gap: var(--sp-4); }

@media (max-width: 760px) {
  /* Precios + Foto vuelven a apilarse (columna angosta rompería la grilla de precios y/o
     desbordaría los botones de la fila de foto). */
  .ml-editor-row-2 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .ml-bulk-fields { gap: 4px; }
  .ml-bulk-inp { width: 110px; }
  .ml-td-name { max-width: 120px; }
  .ml-editor-grid { grid-template-columns: 1fr; }
  .ml-editor-side-grid { grid-template-columns: 1fr; }
  .ml-attr-row { grid-template-columns: 1fr 1fr 28px; }
  .ml-toolbar-row { gap: 6px; }
  .ml-result-counter { margin-left: 0; padding-left: 0; width: 100%; order: 3; }
}

/* ── PR4 — chip de markup en la celda "ML propuesto" (tabla masiva) ── */
.ml-td-markup-chip { display: block; margin-top: 2px; }

/* ── PR4 — botón ⚙ configuración de markup sugerido + panel colapsable ── */
.ml-settings-btn { font-size: 16px; line-height: 1; padding: 6px 9px; flex-shrink: 0; }
.ml-settings-panel {
  margin-bottom: var(--sp-3);
  animation: mlSettingsIn var(--t-med) var(--ease-out);
}
@keyframes mlSettingsIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.ml-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-2); }
.ml-settings-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); }
.ml-settings-note { font-size: var(--fs-xs); color: var(--text-3); line-height: var(--lh-base); margin-top: var(--sp-3); }
.ml-settings-footer { display: flex; align-items: center; gap: 12px; margin-top: var(--sp-4); flex-wrap: wrap; }

/* ── PR5 — bloque "Comisión ML" (fee drift) dentro del panel ⚙ ── */
.ml-settings-fee { font-size: var(--fs-sm); }
.ml-settings-fee .ml-settings-note { margin-top: 0; }
.ml-settings-fee .ml-settings-note div { margin-bottom: 2px; }

@media (max-width: 640px) {
  .ml-settings-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Tabla comparativa de escenarios (logistica) ── */
.logi-scen-wrap {
  margin-top: 16px; border: 1px solid var(--border); border-radius: var(--r-sm);
  overflow: hidden;
}
.logi-scen-header {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border); border-bottom: 1px solid var(--border);
}
.logi-scen-col {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 14px; background: var(--surface-2);
}
.logi-scen-col.negociada { background: var(--green-soft); }
.logi-scen-label { font-size: var(--fs-xs); color: var(--text-3); font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: 0.04em; }
.logi-scen-aforo { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--text-1); }
.logi-scen-meta { font-size: var(--fs-xs); }
.logi-scen-badge {
  font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--orange-soft); color: var(--orange); white-space: nowrap;
}
.logi-scen-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.logi-scen-th {
  text-align: left; padding: 6px 12px;
  font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-3);
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.logi-scen-th.logi-scen-num,
.logi-scen-td.logi-scen-num,
.logi-scen-td.logi-scen-saving { text-align: right; }
.logi-scen-td { padding: 7px 12px; border-bottom: 1px solid var(--border-soft, var(--border)); }
.logi-scen-row:last-child .logi-scen-td { border-bottom: none; }
.logi-scen-row:hover { background: var(--surface-2); }
.logi-scen-dest { font-weight: var(--fw-semi); color: var(--text-2); }
.logi-scen-saving.is-positive {
  display: flex; justify-content: flex-end; align-items: center; gap: 6px;
  color: var(--green); font-weight: var(--fw-semi);
}
.logi-scen-pct {
  font-size: var(--fs-xs); background: var(--green-soft);
  border-radius: var(--r-pill); padding: 1px 6px;
}
.logi-scen-note {
  font-size: var(--fs-xs); padding: 8px 12px;
  background: var(--surface-2); border-top: 1px solid var(--border);
  margin: 0; line-height: var(--lh-base);
}
.logi-scenarios-empty {
  margin-top: 12px; padding: 10px 12px;
  border: 1px dashed var(--border-strong); border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}

/* ── Vista Descripciones (calcada de .aforos-*/.ml-*) ──
   Reusa .aforos-table/.aforos-th/.aforos-td/.aforos-chk/.bulk-bar/.filter-bar/.modal-* tal cual;
   acá solo lo específico: barra de sync con Notion, celdas de corta truncada y chips de estado. */
.desc-sync-bar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.desc-sync-status { font-size: var(--fs-xs); }

/* El clamp de 2 líneas va en el <span> HIJO, nunca en el <td>: aplicar display:-webkit-box a
   una celda de tabla pisa el display:table-cell y rompe el layout (recorta la línea de arriba y
   la de abajo, y en Chrome duplica el render de la celda). */
.desc-td-corta { max-width: 260px; }
.desc-td-corta > span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal;
}
/* Estado = solo un chip → que la columna se encoja a su contenido (width:1% + nowrap) en vez de
   absorber el espacio sobrante del layout automático de la tabla. */
.desc-col-estado { width: 1%; white-space: nowrap; }

.desc-chip { font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--r-pill); white-space: nowrap; }
.desc-chip-falta { background: var(--orange-soft); color: color-mix(in srgb, var(--orange) 88%, #000); }
.desc-chip-sin-corta { background: var(--surface-2); color: var(--text-3); }
.desc-chip-sugerencia { background: var(--blue-soft); color: color-mix(in srgb, var(--blue) 88%, #000); }
.desc-chip-al-dia { background: var(--green-soft); color: color-mix(in srgb, var(--green) 85%, #000); }
[data-theme="dark"] .desc-chip-falta { color: var(--orange); }
[data-theme="dark"] .desc-chip-sugerencia { color: var(--blue); }
[data-theme="dark"] .desc-chip-al-dia { color: var(--green); }

.desc-notion-badge {
  font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text-2);
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-block; vertical-align: middle;
}

.desc-bulk-bar {
  /* sin `display` propio — ver nota en .aforos-bulk-bar */
  flex-wrap: wrap; gap: var(--sp-2); padding: 10px 14px; align-items: center;
}
.desc-bulk-count { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-2); min-width: 110px; }
.desc-bulk-apply { flex-shrink: 0; }
.desc-bulk-apply:first-of-type { margin-left: auto; }
@media (max-width: 640px) {
  .desc-bulk-apply:first-of-type { margin-left: 0; }
  .desc-bulk-apply { flex: 1 1 auto; }
}

/* Badge de sugerencia de nombre (columna Nombre) — mismos tokens que .desc-chip-sugerencia */
.desc-name-badge {
  display: inline-block; margin-left: 6px; vertical-align: middle;
  font-size: var(--fs-xs); font-weight: var(--fw-semi); white-space: nowrap;
  padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--blue-soft); color: color-mix(in srgb, var(--blue) 88%, #000);
  cursor: help;
}
[data-theme="dark"] .desc-name-badge { color: var(--blue); }

/* ── Scroll indicator CSS-only: sombras de borde que aparecen/desaparecen según el
   scroll horizontal disponible (background-attachment local/scroll = truco estándar). ── */
.desc-table-wrap {
  background:
    linear-gradient(to right, var(--surface) 30%, transparent),
    linear-gradient(to left, var(--surface) 30%, transparent),
    linear-gradient(to right, rgba(0, 0, 0, .08), transparent 10px),
    linear-gradient(to left, rgba(0, 0, 0, .08), transparent 10px);
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-color: var(--surface);
  background-size: 40px 100%, 40px 100%, 10px 100%, 10px 100%;
  background-attachment: local, local, scroll, scroll;
}
[data-theme="dark"] .desc-table-wrap {
  background-image:
    linear-gradient(to right, var(--surface) 30%, transparent),
    linear-gradient(to left, var(--surface) 30%, transparent),
    linear-gradient(to right, rgba(0, 0, 0, .5), transparent 10px),
    linear-gradient(to left, rgba(0, 0, 0, .5), transparent 10px);
}

/* ── Editor inline de descripciones (nombre + corta + larga) ── */
/* La fila del editor vive dentro de la tabla scrolleable: sticky + 100cqw la
   mantienen siempre dentro del área visible (si no, en móvil desborda a la derecha). */
.desc-table-wrap { container-type: inline-size; }
.desc-inline-editor .aforos-inline-wrap {
  position: sticky;
  left: 0;
  max-width: 100cqw;
  box-sizing: border-box;
}
.desc-inline-form { display: grid; gap: var(--sp-4); max-width: 720px; }
.desc-char-count { font-size: var(--fs-xs); margin-top: 4px; }

/* ── Columna "Título ML" (F8) — guardado (✓ verde) vs sugerido atenuado + chip ──────────────── */
.desc-col-titulo-ml { max-width: 220px; }
.desc-titulo-ml-ok {
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: middle;
}
.desc-titulo-ml-check { color: var(--green); margin-left: 6px; font-weight: var(--fw-semi); }
.desc-titulo-ml-muted {
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: middle; color: var(--text-3); font-style: italic;
}
.desc-titulo-ml-chip {
  font-size: var(--fs-xs); padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text-3); margin-left: 6px; white-space: nowrap;
}
@media (max-width: 1100px) {
  .desc-col-titulo-ml { display: none; }
}
.desc-long-label { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.desc-html-toggle.active { background: var(--surface-2); }
.desc-editor-long { min-height: 120px; }
.desc-inline-actions { display: flex; gap: var(--sp-2); }

.desc-prop-result-wrap { min-height: 0; }
.desc-prop-result { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.desc-prop-pill {
  font-size: var(--fs-xs); padding: 3px 10px; border-radius: var(--r-pill);
  white-space: nowrap; border: 1px solid transparent;
}
.desc-prop-pill.ok { background: var(--green-soft); color: color-mix(in srgb, var(--green) 85%, #000); border-color: var(--green-border); }
.desc-prop-pill.skip { background: var(--surface-2); color: var(--text-3); }
.desc-prop-pill.warn { background: var(--orange-soft); color: color-mix(in srgb, var(--orange) 88%, #000); border-color: var(--orange-border); }
[data-theme="dark"] .desc-prop-pill.ok { color: var(--green); }
[data-theme="dark"] .desc-prop-pill.warn { color: var(--orange); }

/* ── Modal de preview del sync con Notion (usa .modal/.modal-backdrop/.modal-head de base) ── */
.desc-sync-preview { display: flex; flex-direction: column; gap: var(--sp-3); }
.desc-sync-summary-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.desc-sync-summary-item {
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  background: var(--surface-2); border-radius: var(--r-pill); padding: 4px 12px;
}
.desc-sync-details { font-size: var(--fs-sm); }
.desc-sync-details summary { cursor: pointer; color: var(--blue); font-weight: var(--fw-semi); padding: 4px 0; }
.desc-sync-list { max-height: 220px; overflow-y: auto; margin: var(--sp-2) 0 0; padding-left: 20px; font-size: var(--fs-xs); color: var(--text-2); }
.desc-sync-list li { padding: 2px 0; }

/* ── Modal compartido "Aplicar título sugerido" (components/titulo_bulk_modal.js) ──
   Reusa .modal/.modal-backdrop/.desc-sync-summary-row/.desc-sync-details/.desc-sync-list. */
.titulo-bulk-modal { max-width: 720px; }
.titulo-bulk-body { display: flex; flex-direction: column; gap: var(--sp-2); }
.titulo-bulk-table-wrap { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.titulo-bulk-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.titulo-bulk-table th {
  position: sticky; top: 0; background: var(--surface-2); text-align: left;
  padding: 6px 10px; font-weight: var(--fw-semi); color: var(--text-2); font-size: var(--fs-xs);
}
.titulo-bulk-table td { padding: 6px 10px; border-top: 1px solid var(--border); vertical-align: top; }
.titulo-bulk-td-actual, .titulo-bulk-td-sugerido {
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.titulo-bulk-td-sugerido { color: var(--blue); }

@media (max-width: 760px) {
  .desc-td-corta { max-width: 140px; }
  .titulo-bulk-td-actual, .titulo-bulk-td-sugerido { max-width: 110px; }
}

/* ── Modal "Editar atributo" (Etapa E3) — reusa .field/.field-label/.ml-ficha-control/.ml-alert ── */
.ficha-bulk-set-modal { max-width: 560px; }
.ficha-bulk-set-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.ficha-bulk-set-vaciar { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; }

/* ── Modal "Completar ficha (sugerido)" (Etapa 4) — calcado de .titulo-bulk-*, filas <details> ── */
.ficha-bulk-modal { max-width: 760px; }
.ficha-bulk-body { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 60vh; overflow-y: auto; }
.ficha-bulk-list { display: flex; flex-direction: column; gap: 6px; margin-top: var(--sp-2); }
.ficha-bulk-item { border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 10px; }
.ficha-bulk-summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 8px 0; font-size: var(--fs-sm); }
.ficha-bulk-summary::-webkit-details-marker { display: none; }
.ficha-bulk-item[open] .ficha-bulk-summary { border-bottom: 1px solid var(--border); }
.ficha-bulk-sku { font-weight: var(--fw-semi); flex-shrink: 0; }
.ficha-bulk-name { color: var(--text-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-bulk-count { font-size: var(--fs-xs); color: var(--text-3); flex-shrink: 0; white-space: nowrap; }
.ficha-bulk-req-badge { font-size: var(--fs-xs); padding: 1px 8px; border-radius: var(--r-pill); background: var(--red-soft); color: var(--red); flex-shrink: 0; white-space: nowrap; }
.ficha-bulk-attrs { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); margin: 4px 0 8px; }
.ficha-bulk-attrs td { padding: 3px 10px 3px 0; border-top: 1px solid var(--border); }
.ficha-bulk-attrs td:first-child { color: var(--text-2); }

@media (max-width: 900px) {
  .desc-col-corta-odoo { display: none; }
}

@media (max-width: 640px) {
  .desc-col-rubro, .desc-col-notion { display: none; }
}

/* ── Resumen de todas las campañas de promo (arriba del panel de Promociones ML) ─────────────
   Responde de un vistazo "¿me quedó algo sin sumar en alguna promo?" sin abrir campaña por
   campaña. Los chips son botones: saltan a esa campaña. */
.promo-resumen { margin-bottom: var(--sp-3); }
.promo-resumen-box {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); background: var(--surface-2);
  display: grid; gap: var(--sp-2);
}
.promo-resumen-box.hay-pendientes { border-color: var(--orange); background: var(--orange-soft); }
.promo-resumen-box.al-dia { border-color: var(--green); background: var(--green-soft); }
/* "roto" = no se pudo contar. NO usa el verde de "al día" a propósito: la falta de dato jamás
   debe leerse como tranquilidad. */
.promo-resumen-box.roto { border-color: var(--red); background: var(--red-soft); }
.promo-resumen-box.contando { color: var(--text-3); }
.promo-resumen-titulo { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.promo-resumen-aviso { font-size: var(--fs-sm); color: var(--text-2); }
.promo-resumen-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.promo-chip {
  display: inline-flex; align-items: baseline; gap: var(--sp-2);
  font-size: var(--fs-xs); padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); background: var(--surface);
  color: inherit; cursor: pointer; text-align: left;
}
.promo-chip:hover { border-color: var(--blue); }
.promo-chip.pendiente { border-color: var(--orange); }
.promo-chip.ok { opacity: .75; }
.promo-chip.ilegible { border-style: dashed; color: var(--text-3); cursor: help; }
.promo-resumen-pie { display: flex; align-items: center; gap: var(--sp-3); }

/* Chip de promoción en el panel general del catálogo ML */
.ml-promo-chips { display: inline-flex; gap: var(--sp-1); flex-wrap: wrap; }
.ml-badge.promo-en { background: var(--orange-soft); color: var(--orange); font-weight: var(--fw-semi); }
.ml-badge.promo-candidata { background: var(--surface-2); color: var(--text-3); cursor: help; }

/* Compactado de la tabla ML (2026-08-21): entra más información por pantalla. El alto de fila lo
   manda la miniatura (40px + padding), no el texto — por eso baja a 32px junto con el padding.
   Medido antes/después en el navegador, no estimado. */
.ml-promo-slot { display: inline-flex; gap: var(--sp-1); }
.ml-promo-slot:empty { display: none; }
/* El nombre de campaña va RECORTADO: "DESCUENTAZOS AGOSTO 2026" completo empujaba la columna
   Estado fuera de pantalla. El nombre entero vive en el tooltip. */
.ml-badge.promo-en, .ml-badge.promo-candidata {
  max-width: 142px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help;
}
/* Categoría ML: chip corto en una columna de 190px. Recortar libera ~60px para el resto. */
.ml-td-categoria-ml { max-width: 130px; }

/* ============ Pestaña «Stock» (C1) — reusa .ml-table/.badge-*/.kpi-grid/.alert-strip/.btn-ghost;
   estas líneas solo cubren lo que ningún patrón existente cubría. ============ */
.stock-matrix { margin-top: var(--sp-2); }
.stock-chips { margin-top: var(--sp-2); }
/* Chip "última lectura desconocida" del semáforo: mismo look que .ml-badge.unknown pero con un
   borde propio para no confundirse con "pendiente" (.ml-badge.pending, que es ámbar). */
.stock-matrix .ml-badge.unknown { border: 1px dashed var(--border); }
/* Chip del sticker "últimas unidades" (id 442, ver meta.sticker_ultimas_id): reusa .badge-warn,
   solo ajusta el padding para que se vea igual de compacto que el resto de .stock-chips. */
.stock-chips .badge-warn, .stock-chips .badge-ok { padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--fs-xs); white-space: nowrap; }
/* En dark mode, `.ml-badge.unknown` (fondo --surface-2 + texto --text-4) pierde contraste contra
   el borde punteado nuevo de arriba: se sube el borde con color-mix sobre --border, en vez de un
   color fijo que no respondería a un cambio de paleta. */
[data-theme="dark"] .stock-matrix .ml-badge.unknown {
  border-color: color-mix(in srgb, var(--text-4) 60%, transparent);
}

/* ============ Colas de #/stock (C2) — reusa .sku-tabs/.aforos-table/.kpi-grid/.alert-strip/
   .bulk-bar/.ml-badge-group tal cual; solo lo que ningún patrón existente cubría. ============ */
/* Las pestañas de #/stock son <a href="#/stock/…"> (deep-link real), no <button>: pisar el
   subrayado/color de link para que se vean igual que las .sku-tab de la ficha (botones). */
.sku-tabs a.sku-tab { text-decoration: none; }
.stock-alertas-talles { gap: 4px; }
/* La tira de talles reusa .ml-badge + las clases de semáforo (badge-ok/-warn/-bad/unknown), que
   ya tienen su contraste resuelto en dark mode (ver [data-theme="dark"] .badge-* arriba). */
[data-theme="dark"] .stock-alertas .ml-badge.unknown { border: 1px dashed var(--border); }

/* Detalle expandible del preset `ingresos` (C4, §6 DISENO-C4): tabla anidada Talle × Recibido/
   Eshop/D1 dentro de una fila con colspan, y el chevron que la abre/cierra. */
.stock-ingresos-toggle { font-size: var(--fs-md); line-height: 1; padding: 2px 8px; }
.stock-ingresos-toggle[aria-expanded="true"] { transform: rotate(180deg); }
.stock-ingresos-detail-row td { background: var(--surface-2); padding: var(--sp-2) var(--sp-3); }
.stock-ingresos-detail-table { margin: 0; }
.stock-ingresos-detail-table .central-row td { font-weight: 600; }

/* ============ Criterios (F1, docs/BRIEF-STOCK-AUTO-F1.md §5) — reusa .card/.card-head/
   .card-title/.field/.aforos-table/.alert-strip/.ml-badge tal cual; solo el combobox de búsqueda
   de "Excluidos" es nuevo (no había ningún patrón de dropdown de resultados en el resto de la app). */
.stock-criterios .card { margin-top: var(--sp-4); }
.stock-criterios-search-wrap { position: relative; }
.stock-criterios-search-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--sh-2, var(--sh-1)); max-height: 240px; overflow-y: auto;
}
.stock-criterios-search-results:empty { display: none; }
.stock-criterios-search-item {
  display: block; width: 100%; text-align: left; padding: 8px 12px; border: none; background: none;
  color: var(--text-1); font-size: var(--fs-sm); cursor: pointer;
}
.stock-criterios-search-item:hover { background: var(--surface-2); }
.stock-criterios-search-item.muted { cursor: default; }
.stock-criterios-search-item.muted:hover { background: none; }

/* ============ F5 — Autocompletados IA (docs/BRIEF-F5-AUTOCOMPLETAR.md §3 Front) ============
   Sugerencia mostrada AL LADO del campo (nunca lo pisa hasta "Aceptar"): fondo tenue con borde
   izquierdo, mismo lenguaje visual que .alert-strip.info pero más chico (va dentro de un .field,
   no es una alerta de página). Reusa .btn-ghost/.btn-sm/.field-label/.muted tal cual. */
.ia-suggest-btn { flex-shrink: 0; }
.ia-suggest-row {
  background: var(--blue-soft); border-left: 3px solid var(--blue);
  border-radius: 0 var(--r) var(--r) 0; padding: 6px 10px; margin-top: 6px;
  font-size: var(--fs-sm); color: var(--text-1);
}
.ia-suggest-cost { font-size: var(--fs-xs); color: var(--text-3); margin-top: 4px; }
[data-theme="dark"] .ia-suggest-row { color: var(--text-1); }

/* talento: fotos + filtros */
/* Avatar circular 40px de la tabla (foto real o iniciales sobre color derivado del nombre). */
.talento-avatar {
  width: 40px; height: 40px; border-radius: var(--r-pill); object-fit: cover; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-1);
}
.talento-avatar-lg { width: 96px; height: 96px; font-size: var(--fs-h3); }
.talento-th-avatar { width: 48px; }

/* Toggle Tabla/Galería + contador de resultados, misma fila que el resto de la toolbar. */
.talento-count { font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; }

/* Galería: grilla de tarjetas, foto 1:1 arriba, datos abajo (misma ficha al click que la tabla). */
.talento-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-4);
}
.talento-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; cursor: pointer; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.talento-card:hover { border-color: var(--blue-border); box-shadow: var(--sh-1); }
.talento-card-photo {
  /* Pisa el 40px/circular de `.talento-avatar` (la tarjeta lo reusa para foto o iniciales):
     medido 2026-09-21, sin `height: auto` la foto de la galería quedaba en una franja de 40px. */
  width: 100%; height: auto; border-radius: 0; aspect-ratio: 1 / 1; object-fit: cover; display: flex; align-items: center;
  justify-content: center; font-size: var(--fs-h2); font-weight: var(--fw-semi); color: var(--text-1);
}
.talento-card-body { padding: var(--sp-3); display: flex; flex-direction: column; gap: 4px; }
.talento-card-name { font-weight: var(--fw-semi); color: var(--text-1); }

/* Chips multiselección de la ficha (lugar/aplica_para/formatos/tipo_contenido/palabras_clave/líneas):
   opciones sugeridas + agregadas a mano, mismo `.chip-toggle` para ambas — solo cambia el estado
   activo. Distinto de `.badge` (esos son de solo lectura, en tabla/galería). */
.chips-select { display: flex; flex-direction: column; gap: var(--sp-2); }
.chips-select-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-toggle {
  font-family: inherit; font-size: var(--fs-sm); padding: 5px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chip-toggle:hover { border-color: var(--blue-border); }
.chip-toggle-active { background: var(--blue-soft); border-color: var(--blue-border); color: var(--blue); }

/* ---- Promociones B2C (#/promociones-b2c) ---- */
.pb2c { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 880px; }
.pb2c .card + .card { margin-top: 0; }
.pb2c-vigente { font-size: var(--fs-h3); font-weight: var(--fw-semi); line-height: 1.45; color: var(--text-1); margin: 0 0 var(--sp-2); }
.pb2c-meta { font-size: var(--fs-sm); color: var(--text-3); margin: 0; }
.pb2c-vacio { color: var(--text-2); margin: 0; }
.pb2c-aviso { font-weight: var(--fw-semi); }
.pb2c-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.pb2c-escalon { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--sp-2); align-items: end; margin-bottom: var(--sp-2); }
.pb2c-escalon .btn-ghost { align-self: end; }
.pb2c-check { display: flex; gap: var(--sp-3); align-items: flex-start; line-height: 1.4; cursor: pointer; }
.pb2c-check input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.pb2c-radios { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.pb2c-radios label { display: flex; gap: var(--sp-2); align-items: center; cursor: pointer; }
.pb2c-excep { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.pb2c-excep .input { flex: 1; }
.pb2c-diff { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
.pb2c-errores { margin: 0; padding-left: 1.2em; }
.pb2c-acciones { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.pb2c-hist summary { cursor: pointer; font-weight: var(--fw-semi); color: var(--text-2); }
.pb2c-hist-item { padding: var(--sp-3) 0; border-top: 1px solid var(--border-soft); font-size: var(--fs-sm); }
.pb2c-hist-item p { margin: 2px 0 0; color: var(--text-3); }

/* ── #/maestro — edición en la celda (docs/BRIEF-MAESTRO-EDICION-EN-LINEA.md §1.1) ─────────── */
.maestro-celda-editable { cursor: text; position: relative; }
.maestro-celda-editable:hover { box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)); }
.maestro-celda-editable:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.maestro-celda-baja { color: var(--orange); }
.maestro-celda-estado { font-size: var(--fs-xs); margin-top: 2px; white-space: normal; }
.maestro-celda-estado.is-ok { color: var(--green); }
.maestro-celda-estado.is-wait { color: var(--text-3); }
.maestro-celda-estado.is-bad { color: var(--red); }
.maestro-th-rollup { color: var(--text-3); font-style: italic; }
.maestro-rollup { color: var(--text-3); }
.maestro-picker {
  position: absolute; z-index: 1000; width: 280px; max-width: calc(100vw - 16px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18); padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.maestro-picker .input { width: 100%; }
.maestro-picker-lista { max-height: 260px; overflow-y: auto; }
.maestro-picker-opcion { padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: var(--fs-sm); }
.maestro-picker-opcion.is-activa, .maestro-picker-opcion:hover { background: var(--surface-2); }
.maestro-picker-opcion.is-actual { font-weight: var(--fw-semi); }
.maestro-picker-nota, .maestro-picker-vacio { font-size: var(--fs-xs); color: var(--text-3); }

/* ── #/maestro — rollups, «Columnas» y columnas fijas al scroll horizontal (BRIEF §1.3, §2) ── */
.maestro-table { width: max-content; min-width: 100%; }
.maestro-td-rollup { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-xs); }
.maestro-fija { position: sticky; z-index: 2; background: var(--bg-app); }
.aforos-th.maestro-fija { z-index: 3; }
.maestro-fija-1 { left: 0; width: 36px; min-width: 36px; max-width: 36px; }
.maestro-fija-2 { left: 36px; width: 120px; min-width: 120px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maestro-fija-3 { left: 156px; min-width: 180px; max-width: 240px; box-shadow: 1px 0 0 var(--border); }
.aforos-row:hover .maestro-fija { background: var(--surface-2); }
.maestro-columnas { width: 300px; }
/* Barra horizontal pegada al pie de la pantalla (la nativa queda al final de la tabla larga). */
.maestro-barra-h { position: sticky; bottom: 0; z-index: 4; overflow-x: auto; overflow-y: hidden; height: 16px; background: var(--bg-app); border-top: 1px solid var(--border); }
.maestro-barra-h-ancho { height: 1px; }
.maestro-columnas .maestro-picker-lista { max-height: 360px; }
.maestro-columnas-item { display: flex; gap: 8px; align-items: center; padding: 4px 6px; font-size: var(--fs-sm); cursor: pointer; }
.maestro-columnas-item:hover { background: var(--surface-2); border-radius: 6px; }

/* ---- Landings (#/landings, docs/BRIEF-LANDINGS.md §2.8) ----
   Chip por sitio con los colores del cartel Ruffo: B2C naranja, B2B verde, Sin sitio neutro. */
.chip-sitio { display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: var(--fw-semi); line-height: 1; padding: 4px 9px; border-radius: var(--r-pill); white-space: nowrap; }
.chip-sitio-b2c { background: color-mix(in srgb, #F27430 18%, transparent); color: color-mix(in srgb, #F27430 70%, var(--text-1)); }
.chip-sitio-b2b { background: color-mix(in srgb, #1F4A3D 22%, transparent); color: color-mix(in srgb, #2f7a62 70%, var(--text-1)); }
.chip-sitio-sin { background: var(--surface-2); color: var(--text-3); }
.chip-sitio-mini { padding: 2px 6px; }
.landings-tabs-row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; justify-content: space-between; margin-bottom: var(--sp-3); }
.landings-table-card { padding: 0; }
.landings-table-wrap { overflow-x: auto; }
.landings-titulo { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.landings-sub { font-size: var(--fs-xs); margin-top: 3px; }
.landings-aviso { font-size: var(--fs-xs); color: color-mix(in srgb, var(--orange) 85%, var(--text-1)); margin-top: 3px; }
.landings-contactos { white-space: nowrap; font-variant-numeric: tabular-nums; }
.landings-acciones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.landings-acciones a.btn-ghost { text-decoration: none; }
.landings-head-chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: var(--fs-xs); }
.landings-editor { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.landings-codigo { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.45; min-height: 460px; white-space: pre; tab-size: 2; }
.landings-previa { border: 0; background: #fff; transform-origin: top left; display: block; }
.landings-previa-marco { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r); background: #fff; min-height: 200px; }
.landings-previa-marco.es-celular { border-radius: 18px; max-width: 392px; margin: 0 auto; }
.landings-editor > * { min-width: 0; } /* sin esto el iframe de 1366px ensancha la columna 1fr y la escala queda en 1 */
.landings-editor.sin-codigo { grid-template-columns: 1fr !important; }
.landings-editor.sin-codigo > .field:first-child, .landings-ancho-wrap[hidden] { display: none !important; }
.landings-ancho-wrap { font-size: var(--fs-sm); color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.landings-ancho { width: 120px; }
.landings-toolbar { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.landings-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 2px; background: var(--surface-2); }
.landings-seg-btn { border: 0; background: transparent; padding: 6px 12px; border-radius: 999px; font-size: var(--fs-sm); cursor: pointer; color: var(--text-2); }
.landings-seg-btn.is-active { background: var(--surface); color: var(--text-1); box-shadow: var(--sh-1); }
.landings-previa-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.landings-acciones-editor { flex-wrap: wrap; }
.landings-motivos { margin: 6px 0 0 18px; padding: 0; }
.landings-versiones-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.landings-versiones-lista li { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); }
.landings-confirm-nombre { font-size: var(--fs-h3); font-weight: var(--fw-bold); padding: 10px 14px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--border); }
.landings-sitios { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.landings-sitio-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: var(--sp-4); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); color: var(--text-1); cursor: pointer; font: inherit; }
.landings-sitio-btn:hover { border-color: var(--border-strong); box-shadow: var(--sh-1); }
.landings-sitio-b2c:hover { border-color: #F27430; }
.landings-sitio-b2b:hover { border-color: #2f7a62; }
.landings-textos summary { cursor: pointer; font-weight: var(--fw-semi); margin-bottom: var(--sp-2); }
.landings-textos .field { margin-bottom: var(--sp-2); }
.landings-enlaces-grupo { margin: var(--sp-2) 0; }
.landings-enlaces-lista { margin: 4px 0 0; padding-left: 18px; max-height: 220px; overflow-y: auto; }
.landings-enlaces-lista li { margin-bottom: 4px; overflow-wrap: anywhere; }
.landings-enlaces-href { display: block; font-size: var(--fs-xs); }
/* Columna «Enlaces» de la lista: la celda es un botón que abre «¿Quién apunta acá?». */
.landings-enlaces-td { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: center; }
.landings-enlaces-celda { font: inherit; color: var(--text-2); background: none; border: 0; padding: 2px 6px; border-radius: var(--r-pill); cursor: pointer; min-width: 28px; }
.landings-enlaces-celda:hover, .landings-enlaces-celda:focus-visible { background: var(--surface-2); }
.landings-enlaces-chip { padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--fs-xs); }
.landings-leyenda { padding: 0 var(--sp-3) var(--sp-2); margin: var(--sp-2) 0 0; }
@media (max-width: 900px) {
  .landings-editor, .landings-sitios { grid-template-columns: 1fr !important; }
}
/* Landings (2026-10-09): semáforo de antigüedad de «Última edición» · chip «En las dos tiendas» · filtros */
.chip-edad { display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: var(--fw-semi); line-height: 1; padding: 4px 9px; border-radius: var(--r-pill); white-space: nowrap; }
.chip-edad-verde { background: var(--green-soft); color: color-mix(in srgb, var(--green) 70%, var(--text-1)); }
.chip-edad-amarillo { background: color-mix(in srgb, #e6b800 22%, transparent); color: color-mix(in srgb, #b38f00 75%, var(--text-1)); }
.chip-edad-naranja { background: var(--orange-soft); color: color-mix(in srgb, var(--orange) 80%, var(--text-1)); }
.chip-edad-rojo { background: var(--red-soft); color: color-mix(in srgb, var(--red) 80%, var(--text-1)); }
.chip-edad-gris { background: var(--surface-2); color: var(--text-3); }
.landings-edad { white-space: nowrap; }
.landings-leyenda-semaforo { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.chip-dos { display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: var(--fw-semi); line-height: 1; padding: 4px 9px; border-radius: var(--r-pill); white-space: nowrap; background: var(--blue-soft); color: color-mix(in srgb, var(--blue) 80%, var(--text-1)); border: 0; font-family: inherit; }
.chip-dos-link { cursor: pointer; }
.chip-dos-link:hover { text-decoration: underline; }
.landings-tabs-der { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.landings-filtros { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.landings-filtro { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); padding: 6px 12px; border-radius: 999px; font-size: var(--fs-sm); cursor: pointer; font-family: inherit; }
.landings-filtro.is-active { background: var(--text-1); color: var(--surface); border-color: var(--text-1); }
tr.is-destacada > td { background: color-mix(in srgb, var(--blue) 14%, transparent); transition: background .3s; }