*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --cream:#F7F2EB;--gold:#C9A462;--gold-dark:#A67C3A;--gold-light:#FFF8EE;
  --charcoal:#1C1817;--charcoal-soft:#2E2825;
  --wa:#25D366;--red:#E85D5D;--green:#2D6A4F;
  --border:#EAE0D4;--border-light:#F0E8DF;
  --muted:#8A7564;--muted-light:#B5A696;
  --shadow-sm:0 1px 4px rgba(28,24,23,.07);
  --shadow:0 4px 20px rgba(28,24,23,.10);
  --shadow-lg:0 8px 40px rgba(28,24,23,.16);
  --r:12px;--r-sm:8px;
  /* Paneles de alerta grandes (QV: apartado/revisión, categorías sin asignar)
     y, desde 2026-09-06, los chips de stock/publicado de la tarjeta de
     Inventario (antes se dejaban con su tinte claro literal como "acento
     aceptable" -- Eduardo pidió que combinaran con el resto del modo
     oscuro en vez de destacar por descuido). */
  --tint-red-bg:#fff3f3;--tint-red-border:rgba(232,93,93,.25);--tint-red-strong:#c62828;--tint-red-text:#5D4037;
  --tint-amber-bg:#FFFBEB;--tint-amber-border:#B45309;--tint-amber-strong:#B45309;--tint-amber-text:#5D4037;
  --tint-green-bg:#ECFDF5;--tint-green-border:#6EE7B7;--tint-green-strong:#065F46;
  /* Tokens de tema — fijos, no cambian con modo oscuro (chrome intencionalmente oscuro: topbar, toasts, FABs) */
  --ink:#1C1817;--ink-soft:#2E2825;
  /* Tokens de tema — sí cambian con modo oscuro */
  --surface:#fff;--surface-soft:#F8F4EF;
}

/* ══ MODO OSCURO ═══════════════════════════════════════════════════════
   Activado por [data-theme="dark"] en <html> (ver shared.js _applyStoredTheme).
   --ink/--ink-soft NO se redefinen aquí a propósito: el chrome que los usa
   (topbar, toasts, FABs, bulk-bar) ya es oscuro en modo claro y se queda igual. */
:root[data-theme="dark"]{
  --cream:#15120E;--surface:#221D18;--surface-soft:#2A241D;
  --charcoal:#F1E8DB;--charcoal-soft:#D8CBB8;
  --gold-light:#2C2415;
  --border:#3D352B;--border-light:#352E25;
  --muted:#B9A890;--muted-light:#6B5D4D;
  --shadow-sm:0 1px 4px rgba(0,0,0,.5);
  --shadow:0 4px 20px rgba(0,0,0,.6);
  --shadow-lg:0 8px 45px rgba(0,0,0,.7);
  --tint-red-bg:#332020;--tint-red-border:rgba(248,113,113,.35);--tint-red-strong:#F87171;--tint-red-text:#E8D3CE;
  --tint-amber-bg:#332A14;--tint-amber-border:rgba(251,191,36,.4);--tint-amber-strong:#FBBF24;--tint-amber-text:#E8DCC2;
  --tint-green-bg:#1B2E22;--tint-green-border:rgba(110,231,183,.35);--tint-green-strong:#6EE7B7;
  /* Controles nativos (checkboxes sin appearance:none, el selector de fecha,
     scrollbars) no siguen nuestras variables -- siguen color-scheme. Sin esto
     el navegador los sigue dibujando en su tema claro por default aunque
     toda la página alrededor ya esté oscura. */
  color-scheme:dark;
}
/* Estos tenían su propio literal ya distinto del resto (no encajaban en
   ningún token compartido) -- se quedan con su valor de claro exacto de
   siempre, y solo se agrega aquí su variante oscura, para no mover el modo
   claro ni un tono de donde ya estaba. */
:root[data-theme="dark"] .checkbox-row input[type=checkbox]{background:#4A4038}
:root[data-theme="dark"] .ria-item-field.ria-cost input{border-color:var(--tint-amber-border)}
/* Chips de stock/publicado (tarjeta de Inventario) -- a propósito se habían
   dejado con su tinte claro literal como "acento aceptable" al hacer el
   modo oscuro, pero terminaban destacando de más sobre una tarjeta ya
   oscurecida, en vez de leerse como parte del mismo diseño. Eduardo pidió
   que combinen -- mismo patrón de
   tinte oscuro ya usado arriba para rojo/ámbar, con "verde" nuevo para
   stock-ok/pub-visible y gris neutro (reutilizando --surface-soft/--muted,
   sin token nuevo porque solo lo usa esta tarjeta) para pub-hidden. */
:root[data-theme="dark"] .stock-sold{background:var(--tint-red-bg);color:var(--tint-red-strong);border-color:var(--tint-red-border)}
:root[data-theme="dark"] .stock-apt{background:var(--tint-amber-bg);color:var(--tint-amber-strong);border-color:var(--tint-amber-border)}
:root[data-theme="dark"] .pub-visible{background:var(--tint-green-bg);color:var(--tint-green-strong);border-color:var(--tint-green-border)}
:root[data-theme="dark"] .pub-visible:hover{background:var(--tint-green-border);color:var(--tint-green-strong)}
:root[data-theme="dark"] .pub-hidden{background:var(--surface-soft);color:var(--muted);border-color:var(--border)}
:root[data-theme="dark"] .pub-hidden:hover{background:var(--border);color:var(--charcoal-soft)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:'Inter',sans-serif;background:var(--cream);color:var(--charcoal);min-height:100vh}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font-family:inherit}
*{-webkit-tap-highlight-color:transparent}
button,a,[onclick]{touch-action:manipulation}

/* ══ AUTH ══════════════════════════════════════════════════════════════ */
#auth-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;background:linear-gradient(150deg,#FAF5EE 0%,#EDE0CE 100%);color-scheme:light}
/* Login — a propósito NO usa los tokens de tema (--surface/--charcoal/--border):
   es la única pantalla sin sesión todavía, nadie tiene una preferencia guardada
   ahí, así que se queda siempre igual (claro, como era antes de que existiera
   el modo oscuro) sin importar el toggle del resto de la app. */
.auth-box{background:#fff;border-radius:20px;padding:52px 44px;max-width:400px;width:100%;box-shadow:var(--shadow-lg);text-align:center}
.auth-box img{height:56px;margin:0 auto 24px;border-radius:8px}
.auth-box h1{font-family:'Playfair Display',serif;font-size:1.55rem;margin-bottom:8px;color:#1C1817}
.auth-box p{font-size:.88rem;color:#8A7564;margin-bottom:32px;line-height:1.5}
.auth-box input{width:100%;padding:13px 18px;border:1.5px solid #EAE0D4;border-radius:var(--r);font-size:.95rem;outline:none;transition:.2s;background:#FDFAF7;color:#1C1817}
.auth-box input::placeholder{color:#B5A696}
.auth-box input:focus{border-color:var(--gold);background:#fff;box-shadow:0 0 0 3px rgba(201,164,98,.12)}
.auth-box .err{font-size:.82rem;color:var(--red);margin-top:8px;display:none}
.auth-box .err.show{display:block}
.btn-login{width:100%;margin-top:16px;padding:14px;background:var(--ink);color:#fff;border:none;border-radius:var(--r);font-size:.95rem;font-weight:600;cursor:pointer;transition:.2s;letter-spacing:.02em}
.btn-login:hover{background:var(--ink-soft);transform:translateY(-1px);box-shadow:0 4px 16px rgba(28,24,23,.2)}

/* ══ LAYOUT ════════════════════════════════════════════════════════════ */
#app-screen{display:none}

.topbar{position:sticky;top:0;z-index:50;box-shadow:0 2px 12px rgba(28,24,23,.35)}
.topbar-left{display:flex;align-items:center;gap:16px}
.topbar-left img{height:40px;border-radius:6px}
.topbar-right{display:flex;align-items:center;gap:10px}

.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 20px;border-radius:50px;font-size:.83rem;font-weight:600;cursor:pointer;border:none;transition:all .18s;white-space:nowrap;letter-spacing:.01em}
.btn-gold{
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-dark) 100%);
  color:#fff;box-shadow:0 2px 10px rgba(201,164,98,.4);
}
.btn-gold:hover{background:linear-gradient(135deg,#D4B070 0%,var(--gold-dark) 100%);transform:translateY(-1px);box-shadow:0 5px 18px rgba(201,164,98,.5)}
.btn-gold:active{transform:translateY(0);box-shadow:0 2px 8px rgba(201,164,98,.35)}
.btn-sm{padding:7px 16px;font-size:.78rem}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--charcoal)}
/* IA es la función insignia — mismo dorado que "Completar con IA", el resto de la toolbar queda neutro */
.btn-ia-accent{background:var(--gold-light);border-color:var(--gold);color:var(--gold-dark)}
.btn-ia-accent:hover{background:var(--gold);color:#fff}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-dark);background:var(--gold-light)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 2px 8px rgba(232,93,93,.3)}
.btn-red:hover{background:#c84444;transform:translateY(-1px)}
.user-avatar{width:28px;height:28px;border-radius:50%;background:rgba(201,164,98,.25);color:var(--gold);font-size:.75rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1.5px solid rgba(201,164,98,.45);letter-spacing:0;user-select:none}
.user-name{font-size:.75rem;color:rgba(255,255,255,.65);max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

main{max-width:1080px;margin:0 auto;padding:28px 32px}

/* ══ VISTAS (pestañas) + PENDIENTES ══════════════════════════════════════
   Rediseño 2026-10-07 (patrón Shopify Admin): las vistas son pestañas
   pegadas al borde superior de la tarjeta de la barra; los pendientes por
   corregir viven en un solo menú. Sin colores de "jerarquía": el activo se
   marca con subrayado oscuro, igual que cualquier pestaña. */
.inv-tabs-row{display:flex;align-items:center;gap:12px;box-sizing:border-box;width:calc(100% + 28px);margin:-12px -14px 4px;padding:0 14px;box-shadow:inset 0 -1px 0 var(--border)}
.lbl-short{display:none}
.inv-tabs-wrap{position:relative;flex:1;min-width:0;align-self:stretch}
.inv-tabs-wrap::after{content:'';position:absolute;top:0;bottom:1px;right:0;width:28px;background:linear-gradient(to right,transparent,var(--surface) 85%);pointer-events:none;transition:opacity .15s}
.inv-tabs-wrap.at-end::after{opacity:0}
.inv-tabs{display:flex;gap:24px;height:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.inv-tabs::-webkit-scrollbar{display:none}
.inv-tab{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:48px;padding:0 2px;border:none;background:none;font-family:inherit;font-size:.9rem;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;touch-action:manipulation;transition:color .15s}
.inv-tab:hover{color:var(--charcoal)}
.inv-tab.active{color:var(--charcoal)}
.inv-tab.active::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--charcoal)}
.inv-tab-n{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.inv-tab:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:6px}

.pend-wrap{display:flex;align-items:center;gap:2px;flex-shrink:0}
.pend-btn{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px 0 14px;border:1.5px solid var(--border);border-radius:50px;background:var(--surface);font-family:inherit;font-size:.86rem;font-weight:600;color:var(--charcoal);cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s}
.pend-btn::after{content:'';position:absolute;inset:-4px}
.pend-btn:hover{border-color:var(--muted-light)}
.pend-chev{flex-shrink:0;color:var(--muted)}
.pend-n{font-weight:700;font-variant-numeric:tabular-nums}
.pend-wrap.active .pend-btn{border-color:var(--gold);background:var(--gold-light);color:var(--gold-dark)}
.pend-wrap.active .pend-chev{color:var(--gold-dark)}
.pend-clear{position:relative;width:32px;height:32px;border-radius:50%;border:none;background:none;color:var(--muted);font-size:.9rem;cursor:pointer;font-family:inherit}
.pend-clear::after{content:'';position:absolute;inset:-6px}
.pend-clear:hover{color:var(--charcoal);background:var(--surface-soft)}

#pend-menu-overlay{position:fixed;inset:0;z-index:1300;background:rgba(0,0,0,.45);display:none;align-items:flex-end;justify-content:center}
#pend-menu-overlay.open{display:flex}
#pend-menu-sheet{background:var(--surface);border-radius:20px 20px 0 0;width:100%;max-width:600px;max-height:82dvh;overflow-y:auto;padding:8px 8px calc(24px + env(safe-area-inset-bottom));overscroll-behavior:contain}
#pend-menu-overlay.as-popover{background:transparent;align-items:flex-start;justify-content:flex-start}
#pend-menu-overlay.as-popover #pend-menu-sheet{position:fixed;width:300px;max-width:calc(100vw - 32px);border-radius:14px;padding:6px;box-shadow:0 12px 40px rgba(0,0,0,.18);border:1px solid var(--border)}
.pend-menu-title{padding:10px 12px 6px;font-size:.82rem;font-weight:600;color:var(--muted)}
.pend-item-lbl{flex:1;min-width:0}
.pend-item-n{font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
#pend-menu-sheet .bmo-item.is-active{background:var(--gold-light);color:var(--gold-dark)}
#pend-menu-sheet .bmo-item.is-active svg,#pend-menu-sheet .bmo-item.is-active .pend-item-n{color:var(--gold-dark)}

/* ── CATEGORY BOTTOM SHEET ─────────────────────────────────────────── */
#cat-sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1400;opacity:0;pointer-events:none;transition:opacity .2s}
#cat-sheet-overlay.open{opacity:1;pointer-events:auto}
#cat-sheet{position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-radius:20px 20px 0 0;z-index:1401;transform:translateY(100%);transition:transform .28s cubic-bezier(.25,.8,.25,1);max-height:82dvh;display:flex;flex-direction:column;overflow:hidden}
#cat-sheet.open{transform:translateY(0)}
#sort-sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1400;opacity:0;pointer-events:none;transition:opacity .2s}
#sort-sheet-overlay.open{opacity:1;pointer-events:auto}
#sort-sheet{position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-radius:20px 20px 0 0;z-index:1401;transform:translateY(100%);transition:transform .28s cubic-bezier(.25,.8,.25,1);max-height:60dvh;display:flex;flex-direction:column;overflow:hidden}
#sort-sheet.open{transform:translateY(0)}
.cat-sheet-pill{width:36px;height:4px;background:var(--border);border-radius:2px;margin:10px auto 0;flex-shrink:0}
.cat-sheet-header{display:flex;align-items:center;justify-content:space-between;padding:12px 18px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
.cat-sheet-title{font-size:.9rem;font-weight:700;color:var(--charcoal)}
.cat-sheet-close{width:28px;height:28px;border-radius:50%;border:none;background:var(--cream);color:var(--charcoal);font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cat-sheet-list{overflow-y:auto;flex:1;padding:6px 0 20px;-webkit-overflow-scrolling:touch}
/* Botón de filtro categoría en mobile */
#cat-filter-btn,#sort-filter-btn{display:flex;align-items:center;gap:6px;padding:10px 14px 10px 16px;border:1.5px solid var(--border);border-radius:50px;background:var(--surface-soft);font-size:.84rem;font-weight:400;color:var(--charcoal);cursor:pointer;font-family:inherit;white-space:nowrap;transition:.2s;min-width:0;flex:1}
#cat-filter-btn:hover,#sort-filter-btn:hover{border-color:#ccc}
#cat-filter-btn.has-filter{border-color:var(--gold);color:var(--gold-dark);background:var(--gold-light)}
#cat-filter-btn-label,#sort-filter-btn-label{overflow:hidden;text-overflow:ellipsis;flex:1;text-align:left}
#cat-filter-btn-arrow,#sort-filter-btn-arrow{flex-shrink:0;width:10px;height:6px;font-size:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23B5A696' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;}

/* ══ TOOLBAR ═══════════════════════════════════════════════════════════ */
.toolbar{
  display:flex;flex-direction:column;gap:8px;
  margin-bottom:14px;
  padding:12px 14px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;box-shadow:var(--shadow-sm);
}
.tb-search-row{display:flex;align-items:center;gap:8px;width:100%}
.tb-actions{display:flex;align-items:center;gap:8px}
.tb-actions-wrap{position:relative;flex-shrink:0}
.tb-actions-wrap::after{
  content:'';
  position:absolute;top:0;bottom:0;right:0;width:28px;
  background:linear-gradient(to right,transparent,var(--surface) 85%);
  pointer-events:none;
  opacity:1;transition:opacity .15s;
}
.tb-actions-wrap.at-end::after{opacity:0}
.tb-filter-row{display:flex;align-items:center;gap:8px;width:100%}
.tb-filter-row #cat-filter{display:none}
.tb-filter-row #cat-filter-btn{flex:1;min-width:120px;max-width:240px}
.tb-filter-row #sort-filter-btn{flex:1;min-width:110px;max-width:240px}
.fb-ico{flex-shrink:0;color:var(--muted)}
.tb-filter-row #creator-filter-wrap{flex:1;min-width:0;max-width:130px}
.tb-filter-row #creator-filter-wrap #creator-filter{width:100%}
/* Barra de filtros activos */
.filter-active-bar{display:none;align-items:center;gap:6px;
  padding:5px 14px 7px;font-size:.72rem;color:var(--muted);flex-wrap:wrap}
.filter-active-bar.visible{display:flex}
.fac-chip{display:inline-flex;align-items:center;gap:3px;background:var(--cream);
  border:1px solid var(--border);border-radius:50px;padding:2px 8px;font-size:.7rem;
  font-weight:500;color:var(--charcoal)}
.fac-chip-action{background:#7C3AED;border-color:#7C3AED;color:#fff;cursor:pointer;font-family:inherit}
.fac-chip-x{background:none;border:none;padding:0 0 0 3px;margin:0;cursor:pointer;font-size:.82rem;line-height:1;color:var(--muted);font-weight:700;font-family:inherit;display:inline-flex;align-items:center;transition:color .12s}
.fac-chip-x:hover{color:var(--charcoal)}
.fac-clear{margin-left:auto;flex-shrink:0;background:none;border:none;cursor:pointer;
  font-size:.72rem;font-weight:600;color:var(--gold-dark);padding:2px 6px;
  border-radius:6px;font-family:inherit;transition:.15s}
.fac-clear:hover{background:var(--gold-light)}
.search-scan-row{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
/* Se ve compacto (38px) para no competir en tamaño con el buscador, pero
   el área de toque real es ~44px -- mismo hit-slop que .hi-del en
   Historial de Caja. */
.search-scan-btn{display:none;flex-shrink:0;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface);color:var(--muted);align-items:center;justify-content:center;touch-action:manipulation;position:relative}
.search-scan-btn::after{content:'';position:absolute;inset:-3px}
.search-scan-btn:active{background:var(--gold-light);border-color:var(--gold);color:var(--gold-dark)}
.search-wrap{position:relative;flex:1;min-width:0}
.search-wrap input{
  width:100%;padding:10px 34px 10px 40px;
  border:1.5px solid var(--border);border-radius:50px;
  font-size:.88rem;outline:none;transition:.2s;background:var(--surface-soft);
  color:var(--charcoal);
}
.search-clear-btn{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--muted);cursor:pointer;
  font-size:.78rem;line-height:1;padding:4px 6px;border-radius:50%;transition:.15s;
}
.search-clear-btn:hover{color:var(--charcoal);background:rgba(0,0,0,.07)}
.toolbar .dictate-btn{padding:7px 14px;font-size:.82rem}
.search-wrap input:focus{border-color:var(--gold);background:var(--surface);box-shadow:0 0 0 3px rgba(201,164,98,.12)}
.search-wrap input::placeholder{color:var(--muted-light)}
.search-wrap .s-icon{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  pointer-events:none;font-size:0;line-height:0;
  width:16px;height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B5A696' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat center;
  background-size:contain;
}
.filter-select{
  padding:10px 16px;border:1.5px solid var(--border);border-radius:50px;
  font-size:.84rem;font-weight:400;font-family:inherit;outline:none;background:var(--surface-soft);cursor:pointer;
  color:var(--charcoal);transition:.2s;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23B5A696' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:34px;
}
.filter-select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,164,98,.12);background-color:var(--surface)}

/* ══ TABLE ═════════════════════════════════════════════════════════════ */
/* Esqueleto de carga (la animación .sk vive en shared.css) */
.sk-prod{display:flex;align-items:center;gap:12px}
.sk-thumb{width:52px;height:52px;border-radius:10px;flex-shrink:0}
.sk-lines{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.sk-line{height:13px}
.sk-line-sm{height:11px}
.sk-pill{width:72px;height:26px;border-radius:99px}
.sk-row:hover td{background:none}
.sk-mpc-img{width:72px;height:72px;border-radius:11px;flex-shrink:0}
.sk-row .mpc-info{gap:8px}
.sk-card{pointer-events:none}
.sk-card-img{aspect-ratio:1;border-radius:0}
.sk-tab{width:72px;height:14px;align-self:center;flex-shrink:0;margin:16px 0}
.table-wrap{
  background:var(--surface);border-radius:16px;
  border:1px solid var(--border);overflow:hidden;
  box-shadow:var(--shadow-sm);
}
table{width:100%;border-collapse:collapse;table-layout:fixed}
th{
  background:var(--surface-soft);
  font-size:.69rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:14px 16px;text-align:left;
  border-bottom:1px solid var(--border);
}
td{padding:9px 16px;font-size:.875rem;border-bottom:1px solid var(--border-light);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--surface-soft);transition:background .12s}

.prod-thumb{
  width:52px;height:52px;border-radius:10px;
  object-fit:cover;border:1.5px solid var(--border);
  flex-shrink:0;box-shadow:var(--shadow-sm);
  background:var(--surface-soft);
}
.prod-name{font-weight:600;font-size:.9rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--charcoal);line-height:1.35}
.prod-cat{font-size:.73rem;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── 4 COLUMNAS ── */
.col-check   {width:40px}
.col-product {/* espacio restante */}
.col-price   {width:100px;text-align:right}
.col-state   {width:158px}
td,th{overflow:hidden}

/* Category color system */
.cat-dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0;vertical-align:middle;opacity:.85}

/* ══ VIEW TOGGLE ════════════════════════════════════════════════════════ */
.view-toggle{display:flex;gap:2px;background:var(--surface-soft);border-radius:10px;padding:3px;flex-shrink:0}
.view-btn{width:32px;height:32px;border-radius:7px;border:none;background:transparent;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .16s;color:var(--muted-light)}
.view-btn.active{background:var(--surface);color:var(--charcoal);box-shadow:0 1px 6px rgba(28,24,23,.14)}
.view-btn:hover:not(.active){color:var(--charcoal);background:rgba(255,255,255,.4)}

/* ══ ADMIN CARD GRID ════════════════════════════════════════════════════ */
.admin-cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:16px;padding:20px;
}
.admin-card{
  background:var(--surface);border-radius:12px;border:1px solid var(--border);
  overflow:hidden;box-shadow:0 1px 4px rgba(28,24,23,.06);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,border-color .2s;
  position:relative;display:flex;flex-direction:column;min-width:0;
}
.admin-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold)}
.admin-card.card-selected{border-color:var(--gold);background:var(--gold-light);box-shadow:0 0 0 3px rgba(201,164,98,.15)}
.admin-card.card-oos .ac-img{opacity:.45;filter:grayscale(.6)}
/* Imagen — object-fit:contain (no cover): el catálogo mezcla fotos cuadradas
   y rectangulares sin estandarizar (algunas traen además una franja de texto
   del proveedor pegada al producto) -- con "cover" cada tarjeta recortaba
   distinto según la proporción real de su foto, viéndose desordenado en el
   grid. "contain" muestra la foto completa siempre, centrada, sin recortar
   nada -- mismo criterio que ya usa el modal de la Tienda y el Quick View.
   Fondo blanco fijo (no var(--surface), independiente del tema) porque casi
   todas las fotos de producto ya vienen sobre fondo blanco/gris claro -- un
   marco oscuro alrededor en modo oscuro se vería peor que uno blanco. */
.ac-img-wrap{position:relative;overflow:hidden;aspect-ratio:1;background:#fff}
.ac-img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .35s ease}
.admin-card:hover .ac-img{transform:scale(1.04)}
/* Círculo de selección — estilo Snapseed */
.ac-check{
  -webkit-appearance:none;appearance:none;
  position:absolute;top:8px;left:8px;width:22px;height:22px;
  border:2.5px solid rgba(255,255,255,.9);border-radius:50%;
  background:rgba(0,0,0,.28) center/60% no-repeat;
  box-shadow:0 1px 6px rgba(0,0,0,.32);
  cursor:pointer;opacity:0;transition:opacity .15s,background .12s,transform .1s;
}
.card-selected .ac-check,
.selection-active .ac-check{opacity:1}
@media (hover:hover){.admin-card:hover .ac-check{opacity:.7}}
.card-selected .ac-check{pointer-events:none}
.multi-dragging .admin-card:not(.card-selected){outline:2px dashed rgba(201,164,98,.45);outline-offset:-2px}
.ac-check:checked{
  background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='white' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/58% no-repeat;
  border-color:var(--gold);transform:scale(1.08);
}
.admin-card.card-selected .ac-img{filter:brightness(.82)}
/* ── FLAG DE REVISIÓN ── */
.flag-dot{
  position:absolute;top:8px;right:8px;width:24px;height:24px;
  border-radius:50%;background:#E85D5D;color:#fff;
  font-size:.72rem;display:flex;align-items:center;justify-content:center;
  z-index:3;pointer-events:none;
  box-shadow:0 2px 6px rgba(232,93,93,.5);
  animation:flag-pop .25s ease;
}
@keyframes flag-pop{from{transform:scale(0)}to{transform:scale(1)}}
.flag-dot-row{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;background:#E85D5D;
  font-size:.6rem;color:#fff;flex-shrink:0;vertical-align:middle;
}
/* Producto sin categoría real */
.cat-label-sin-cat{font-family:'Inter',sans-serif!important;font-size:.75rem!important;font-weight:700!important;color:#B45309!important;background:#FFFBEB;border:1px dashed #F59E0B;border-radius:6px;padding:2px 8px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* Nota de flag visible en card */
.flag-note-line{font-size:.68rem;color:#c62828;margin-top:2px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  font-style:italic;opacity:.85}
/* QV — zona de flag */
.qv-flag-active{
  background:var(--tint-red-bg);border:1px solid var(--tint-red-border);
  border-radius:10px;padding:11px 13px;margin:12px 0 2px;
}
.qv-flag-title{font-size:.73rem;font-weight:700;color:var(--tint-red-strong)}
.qv-flag-note-text{font-size:.82rem;color:var(--tint-red-text);margin-top:5px;font-style:italic;line-height:1.5}
.qv-flag-ts{font-size:.65rem;color:var(--muted);margin-top:4px;display:block}

/* QV — banner prioritario del problema, solo visible navegando desde el
   filtro "Por revisar" (_showOnlyFlagged). El motivo por el que se abrió
   el Quick View en ese modo va primero, antes de nombre/precio/foto de
   contexto -- "ver el problema, resolverlo", sin scroll. */
.qv-flag-priority{
  background:#FEF2F2;border:1.5px solid #FCA5A5;border-radius:var(--r-sm);
  padding:12px 14px;margin-bottom:14px;animation:qvFlagPulse .5s ease;
}
.qv-flag-priority-title{display:flex;align-items:center;gap:6px;font-weight:700;color:#B91C1C;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}
.qv-flag-priority-note{font-size:.92rem;color:#7F1D1D;font-style:italic;line-height:1.45;margin:6px 0}
.qv-flag-priority-ts{font-size:.68rem;color:#B91C1C;opacity:.7;display:block;margin-bottom:8px}
.qv-flag-priority-resolve{
  background:var(--surface);border:1.5px solid #16A34A;color:#15803D;font-weight:700;font-size:.78rem;
  padding:7px 14px;border-radius:50px;cursor:pointer;touch-action:manipulation;font-family:inherit;
}
.qv-flag-priority-resolve:active{background:#F0FDF4}
@keyframes qvFlagPulse{
  0%{transform:scale(.97);box-shadow:0 0 0 0 rgba(185,28,28,.35)}
  70%{box-shadow:0 0 0 10px rgba(185,28,28,0)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(185,28,28,0)}
}
.qv-flag-textarea{width:100%;border:1.5px solid var(--border);border-radius:8px;padding:8px 10px;font-size:.85rem;font-family:inherit;resize:none;outline:none;transition:border-color .15s;background:var(--surface);line-height:1.5}
.qv-flag-textarea:focus{border-color:var(--red)}
.qv-btn-flag{background:var(--surface-soft);color:var(--charcoal);border:1.5px solid var(--border)}
.qv-btn-flag:hover{border-color:var(--gold);color:var(--gold-dark)}
.qv-btn-flagdone{background:#e8f5e9;color:#2D6A4F;border:1.5px solid rgba(45,106,79,.3)}
.qv-btn-flagdone:hover{background:#2D6A4F;color:#fff}
.ac-star{
  position:absolute;bottom:8px;right:10px;
  background:transparent;color:#fff;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));
  border:none;border-radius:50%;width:28px;height:28px;
  font-size:.82rem;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:.15s;
}
.ac-star:hover{background:rgba(201,164,98,.85);color:#fff;filter:none}
/* Inactivo: sin chip, sin fondo -- solo el ícono con una sombra suave para
   que se lea sobre cualquier foto (clara u oscura), igual que un badge de
   iOS sobre una imagen. Solo el toggle activo (destacado) se convierte en
   una insignia dorada real, para que sea lo único que de verdad "compite"
   por atención en las 771 filas. Mismo criterio en .mpc-star (grid) y
   .toggle-featured (tabla desktop, ese ya no tenía fondo). */
.ac-star.feat-active{background:rgba(255,248,231,.95);color:var(--gold-dark);filter:none}
/* Cuerpo */
.ac-body{padding:11px 13px 13px;flex:1;display:flex;flex-direction:column}
.ac-name{
  font-weight:600;font-size:.85rem;line-height:1.35;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  color:var(--charcoal);margin-bottom:5px;flex:1;
}
.ac-meta{
  font-size:.7rem;color:var(--muted);
  display:flex;align-items:center;gap:4px;margin-bottom:7px;
  white-space:nowrap;overflow:hidden;
}
.ac-price-row{display:flex;align-items:baseline;gap:6px;margin-bottom:0}
.ac-price{font-family:'Playfair Display',serif;font-weight:700;font-size:1rem;color:var(--charcoal)}
.ac-price-tap{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.ac-price-tap:active{opacity:.6}
.ac-price-zero{font-family:'Inter',sans-serif!important;font-size:.75rem!important;font-weight:700!important;color:#E85D5D!important;background:#FFF5F5;border:1px dashed #E85D5D;border-radius:6px;padding:2px 8px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.ac-orig{font-size:.72rem;color:var(--muted-light);text-decoration:line-through;font-family:'Inter',sans-serif;font-weight:400}
/* Footer */
.ac-footer{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--border-light);
}
.admin-card.card-apartado .ac-img{opacity:.7;filter:sepia(.3)}


.drag-handle{cursor:grab;color:#D5C9BC;padding:0 6px;font-size:1rem;user-select:none;transition:opacity .15s,color .15s;opacity:0}
tr:hover .drag-handle{opacity:1}
.drag-handle:hover{color:var(--gold)}
/* Sin mouse (tablet touch), :hover nunca dispara -- la manija quedaría
   invisible para siempre en la vista de tabla de escritorio (>1024px).
   Se queda con opacity:0 en la banda ≤1024px (ahí la fila es una tarjeta,
   no la tabla real, y el reordenar se hace con "📌 Al inicio"). */
@media(hover:none){
  tr:not(.mpc-row) .drag-handle{opacity:1}
}

.prod-meta{font-size:.72rem;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:5px;min-width:0}
.prod-meta-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}
.state-cell{display:flex;align-items:center;gap:6px}
.price-cell{font-weight:700;font-family:'Playfair Display',serif;font-size:1rem;color:var(--charcoal)}

.badge{display:inline-block;font-size:.65rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:50px;color:#fff}
.badge-best{background:var(--gold)}
.badge-new{background:var(--ink)}
.badge-promo{background:var(--red)}
.badge-natura{background:var(--green)}
.badge-none{background:var(--surface-soft);color:var(--muted)}

.toggle-featured{background:none;border:none;font-size:.9rem;cursor:pointer;padding:3px;border-radius:6px;transition:.15s;line-height:1;flex-shrink:0;color:#C9BCAA}
.toggle-featured:hover{background:var(--surface-soft);transform:scale(1.15);color:var(--gold-dark)}
.toggle-featured.feat-active{color:var(--gold-dark)}

/* ══ DUPLICADOS ════════════════════════════════════════════════════════ */
/* Modal de revisión */
.dup-sheet-pill{width:36px;height:4px;background:var(--border);border-radius:2px;margin:10px auto 4px;flex-shrink:0;display:none}
.dup-signals{font-size:.75rem;font-weight:700;border-radius:6px;padding:6px 10px 6px 8px;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.dup-signals.dup-high{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca}
.dup-signals.dup-med{color:#92400e;background:#fffbeb;border:1px solid #fde68a}
.dup-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dup-dot.red{background:var(--red)}
.dup-dot.amber{background:#d97706}
.dup-section-title{font-size:.69rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:16px 0 6px;display:flex;align-items:center;gap:6px}
.dup-section-title:first-child{padding-top:8px}
.dup-pair{padding:14px 0;border-bottom:1px solid var(--border)}
.dup-pair:last-child{border-bottom:none;padding-bottom:4px}
.dup-pair-cols{display:flex;gap:12px}
.dup-prod{flex:1;background:var(--surface-soft);border-radius:12px;padding:12px;min-width:0}
.dup-prod img{width:100%;aspect-ratio:1/1;object-fit:contain;background:var(--surface);border-radius:8px;margin-bottom:8px;display:block}
.dup-prod-ph{width:100%;aspect-ratio:1/1;background:var(--surface-soft);border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;color:var(--muted);font-size:1.8rem}
.dup-prod-name{font-weight:700;font-size:.88rem;margin-bottom:3px;line-height:1.3}
.dup-prod-meta{font-size:.77rem;color:var(--muted);margin-bottom:8px}
.dup-prod-actions{display:flex;gap:6px;flex-wrap:wrap}
.dup-dismiss{width:100%;background:var(--gold-light);border:1px solid var(--gold);color:var(--gold-dark);border-radius:8px;padding:9px;font-size:.82rem;font-weight:600;cursor:pointer;margin-top:12px;transition:.15s}
.dup-dismiss:hover{background:var(--cream)}
@media(max-width:640px){
  .dup-sheet-pill{display:block}
  /* Dos cards en fila pero con imagen 4/3 para no quedar muy alta */
  .dup-prod img,.dup-prod-ph{aspect-ratio:4/3}
  .dup-prod-name{font-size:.82rem}
  .dup-prod-meta{font-size:.72rem}
}

/* ══ MODAL ═════════════════════════════════════════════════════════════ */
.overlay{position:fixed;inset:0;background:rgba(20,15,12,.5);backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .25s}
.overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--surface);border-radius:20px;max-width:620px;width:100%;max-height:92vh;overflow:hidden;display:flex;flex-direction:column;transform:scale(.94) translateY(12px);transition:transform .28s cubic-bezier(.34,1.56,.64,1);box-shadow:var(--shadow-lg)}
.overlay.open .modal{transform:scale(1) translateY(0)}
.modal-head{padding:24px 28px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--surface)}
.modal-head h3{font-family:'Playfair Display',serif;font-size:1.25rem;color:var(--charcoal)}
.modal-close-btn{background:none;border:none;font-size:1.1rem;cursor:pointer;padding:6px 10px;border-radius:8px;color:var(--muted);transition:.15s}
.modal-close-btn:hover{background:var(--surface-soft);color:var(--charcoal)}
.modal-body{padding:22px 28px;flex:1;overflow-y:auto;min-height:0}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:6px;letter-spacing:.01em}
.field input,.field select,.field textarea,.form-input{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--r);font-size:.9rem;outline:none;transition:.2s;color:var(--charcoal);background:var(--surface-soft);font-family:inherit}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23B5A696' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:10px;padding-right:36px}
/* Flecha de <select> embebida como SVG con color de trazo fijo -- no participa
   de las variables de tema. En oscuro el trazo original (#B5A696/#6B5C48)
   pierde contraste contra --surface-soft, así que se reemplaza por completo
   con un trazo claro cuando data-theme="dark" está activo (selector amplio
   sobre <select> para cubrir tanto .field select como los selects sueltos
   de la toolbar/filtros, que tienen su propia variante mobile más abajo). */
:root[data-theme="dark"] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23B9A890' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:10px!important}
.field input:focus,.field select:focus,.field textarea:focus,.form-input:focus{border-color:var(--gold);background:var(--surface);box-shadow:0 0 0 3px rgba(201,164,98,.12)}
.field textarea{resize:vertical;min-height:90px;line-height:1.5}
.field .hint{font-size:.73rem;color:var(--muted-light);margin-top:5px;line-height:1.4}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 28px;border-top:1px solid var(--border);flex-shrink:0;background:var(--surface);border-radius:0 0 20px 20px}
/* ── TOGGLE SWITCH (reemplaza checkboxes estándar) ── */
.checkbox-row{display:flex;align-items:center;gap:12px;font-size:.88rem;cursor:pointer;color:var(--charcoal)}
.checkbox-row input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:44px;height:26px;border-radius:13px;background:#D1D5DB;
  border:none;flex-shrink:0;position:relative;cursor:pointer;
  transition:background .22s;margin:0;
}
.checkbox-row input[type=checkbox]:checked{background:var(--green)}
.checkbox-row input[type=checkbox]::after{
  content:'';position:absolute;
  width:20px;height:20px;border-radius:50%;background:var(--surface);
  top:3px;left:3px;
  box-shadow:0 1px 4px rgba(0,0,0,.28);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1);
}
.checkbox-row input[type=checkbox]:checked::after{transform:translateX(18px)}

/* ── AVISOS DE DUPLICADOS ── */
.dup-warn{margin-top:7px;padding:8px 11px;border-radius:7px;font-size:.78rem;line-height:1.45;background:var(--gold-light);border:1px solid var(--gold);color:var(--charcoal)}
.dup-warn.error{background:#FFF0F0;border-color:var(--red);color:var(--red)}
.dup-warn .dup-link{background:none;border:none;padding:0;font-size:.78rem;color:var(--gold-dark);cursor:pointer;text-decoration:underline;font-weight:600}
.dup-warn.error .dup-link{color:var(--red)}
/* Modal comparación de similares */
#sim-overlay{position:fixed;inset:0;background:rgba(28,24,23,.55);z-index:1210;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .25s}
#sim-overlay.open{opacity:1;pointer-events:all}
#sim-modal{background:var(--surface);border-radius:16px;width:100%;max-width:380px;overflow:hidden;box-shadow:0 8px 40px rgba(28,24,23,.22);transform:scale(.94);transition:transform .25s}
#sim-overlay.open #sim-modal{transform:scale(1)}
.sim-img{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--surface-soft);display:block}
.sim-body{padding:16px 18px 12px}
.sim-tag{font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:4px}
.sim-name{font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:700;color:var(--charcoal);line-height:1.3;margin-bottom:10px}
.sim-meta{display:flex;gap:14px;font-size:.8rem;color:var(--muted)}
.sim-meta strong{color:var(--charcoal);font-weight:700}
.sim-nav{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 0 4px}
.sim-dot{width:28px;height:28px;border-radius:50%;background:transparent;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:.2s}
.sim-dot::after{content:'';display:block;width:7px;height:7px;border-radius:50%;background:var(--border);transition:.2s}
.sim-dot.active::after{background:var(--gold);width:18px;border-radius:4px}
.sim-foot{padding:12px 18px 18px;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--border)}
.sim-btn-ok{width:100%;padding:11px;border-radius:50px;border:none;background:var(--gold);color:#fff;font-size:.88rem;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s}
.sim-btn-ok:hover{background:var(--gold-dark)}
.sim-btn-edit{width:100%;padding:10px;border-radius:50px;border:1.5px solid var(--border);background:transparent;color:var(--muted);font-size:.82rem;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s}
.sim-btn-edit:hover{border-color:var(--red);color:var(--red)}

/* ── QUICK VIEW ── */
#qv-overlay{position:fixed;inset:0;background:rgba(28,24,23,.55);z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px;gap:12px;opacity:0;pointer-events:none;transition:opacity .25s}
#qv-overlay.open{opacity:1;pointer-events:all}
.qv-panel{background:var(--surface);border-radius:16px;width:100%;max-width:460px;height:min(90vh,680px);max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 40px rgba(28,24,23,.22);transform:scale(.94);transition:transform .25s}
#qv-overlay.open .qv-panel{transform:scale(1)}
.qv-img-zone{position:relative;flex-shrink:0;background:var(--surface-soft)}
.qv-img-zone img{width:100%;height:260px;object-fit:contain;display:block}
.qv-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;height:260px}
.qv-gallery::-webkit-scrollbar{display:none}
.qv-gallery-img{flex:0 0 100%;width:100%;height:260px;object-fit:contain;scroll-snap-align:start;background:var(--surface-soft);display:block}
.qv-gallery-dots{display:flex;justify-content:center;gap:5px;padding:6px 0 4px;background:var(--cream)}
.qv-gd{width:6px;height:6px;border-radius:50%;background:#D1C4B8;cursor:pointer;transition:.2s;flex-shrink:0}
.qv-gd.active{background:var(--gold);transform:scale(1.3)}
/* Círculo y "✕" a propósito NO usan tokens de tema (--charcoal/--surface):
   este botón siempre queda sobre la foto del producto, que siempre tiene
   fondo blanco sin importar el modo -- en modo oscuro, --charcoal se
   invierte a un tono claro y dejaba una "✕" casi invisible sobre el
   círculo (que sigue blanco a propósito), y :hover con --surface se
   hubiera puesto oscuro sobre oscuro. Mismo criterio que el login. */
.qv-close{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;border:none;background:rgba(255,255,255,.92);color:#1C1817;font-size:.9rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.18);z-index:2;transition:background .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.qv-close:hover{background:#fff}
.qv-outer-nav{flex-shrink:0;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.88);color:var(--charcoal);cursor:pointer;font-size:1.5rem;display:flex;align-items:center;justify-content:center;transition:.15s;box-shadow:0 2px 10px rgba(0,0,0,.18);touch-action:manipulation;-webkit-tap-highlight-color:transparent;line-height:1}
.qv-outer-nav:disabled{opacity:.25;pointer-events:none;cursor:default}
.qv-outer-nav:hover:not(:disabled){background:var(--surface);box-shadow:0 4px 16px rgba(0,0,0,.22)}
.qv-img-nav{position:absolute;top:50%;transform:translateY(-50%);width:26px;height:44px;border:none;background:rgba(255,255,255,.72);color:var(--charcoal);cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;z-index:3;opacity:0;transition:.15s;line-height:1;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.qv-img-nav-prev{left:0;border-radius:0 6px 6px 0}
.qv-img-nav-next{right:0;border-radius:6px 0 0 6px}
.qv-img-zone:hover .qv-img-nav{opacity:1}
.qv-img-nav:hover{background:rgba(255,255,255,.95)}
/* Sin mouse (tablet touch), :hover nunca dispara -- la galería ya tiene
   swipe + puntos como navegación principal, pero estas flechas quedaban
   invisibles y sin ninguna forma de encontrarlas al tacto. */
@media(hover:none){.qv-img-nav{opacity:1}}
.qv-counter{font-size:.68rem;color:var(--muted-light);font-weight:500;flex-shrink:0;padding-left:8px;white-space:nowrap}
@keyframes qv-from-right{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:translateX(0)}}
@keyframes qv-from-left {from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:translateX(0)}}
.qv-anim-right .qv-img-zone,.qv-anim-right .qv-info{animation:qv-from-right .3s cubic-bezier(.215,.61,.355,1)}
.qv-anim-left  .qv-img-zone,.qv-anim-left  .qv-info{animation:qv-from-left  .3s cubic-bezier(.215,.61,.355,1)}
/* Zoom fullscreen */
#qv-zoom{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0);display:flex;align-items:center;justify-content:center;transition:background .2s;cursor:zoom-out}
#qv-zoom.open{background:rgba(0,0,0,.92)}
#qv-zoom img{max-width:95%;max-height:90dvh;object-fit:contain;border-radius:8px;transform:scale(.88);opacity:0;transition:transform .22s cubic-bezier(.2,.8,.3,1),opacity .2s}
#qv-zoom.open img{transform:scale(1);opacity:1}
#qv-zoom button{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,.15);color:#fff;font-size:.9rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);transition:.15s}
#qv-zoom button:hover{background:rgba(255,255,255,.28)}
.qv-badge-zone{position:absolute;top:10px;left:10px;pointer-events:none}
.qv-info{flex:1;overflow-y:auto;padding:16px 20px 14px;min-height:0}
.qv-cat-row{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.qv-cat-label{font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-dark)}
.qv-editable{cursor:pointer;border-radius:4px;padding:1px 3px;margin:-1px -3px;transition:background .15s}
.qv-editable:hover{background:rgba(201,164,98,.12)}
.qv-editable:active{background:rgba(201,164,98,.22)}
.qv-name{font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:700;color:var(--charcoal);line-height:1.25;margin-bottom:10px}
.qv-price-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.qv-price{font-size:1.35rem;font-weight:800;font-family:'Playfair Display',serif;color:var(--charcoal)}
.qv-price-orig{font-size:.82rem;text-decoration:line-through;color:var(--muted)}
.qv-disc-chip{background:var(--red);color:#fff;font-size:.68rem;font-weight:800;padding:3px 9px;border-radius:50px}
.qv-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.qv-chip{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:600;padding:4px 10px;border-radius:50px;border:1px solid var(--border);background:var(--cream);color:var(--charcoal)}
.qv-chip-ok{background:#e8f5e9;border-color:#81c784;color:#2D6A4F}
.qv-chip-sold{background:#fce4ec;border-color:#e57373;color:#c62828}
.qv-chip-web{background:#e8f5e9;border-color:#81c784;color:#2D6A4F}
.qv-chip-hidden{background:#fff3e0;border-color:#ffb74d;color:#e65100}
.qv-chip-warn{background:#FFFBEB;border-color:#FCD34D;color:#92400E}
.qv-desc{font-size:.82rem;color:var(--muted);line-height:1.65;margin-top:4px;
  max-height:80px;overflow:hidden;position:relative}
.qv-desc::after{content:'';position:absolute;bottom:0;left:0;right:0;height:28px;
  background:linear-gradient(transparent,var(--surface));pointer-events:none}
.qv-desc.expanded{max-height:none;overflow:visible}
.qv-desc.expanded::after{display:none}
.qv-desc-toggle{font-size:.72rem;color:var(--gold-dark);font-weight:600;cursor:pointer;
  display:none;margin-top:3px;background:none;border:none;padding:0;font-family:inherit}
.qv-id-hint{font-size:.68rem;color:var(--muted-light);margin-top:10px}
.qv-actions{position:relative;flex-shrink:0;padding:12px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--surface);display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.qv-actions::before{content:'';position:absolute;left:0;right:0;top:-28px;height:28px;
  background:linear-gradient(transparent,var(--surface));pointer-events:none;transition:opacity .15s}
.qv-actions.qv-fade-hidden::before{opacity:0}
.qv-btn{display:flex;align-items:center;justify-content:center;gap:5px;padding:10px 6px;border-radius:10px;border:none;cursor:pointer;font-size:.78rem;font-weight:600;font-family:inherit;transition:.15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:42px;white-space:nowrap}
.qv-btn-edit{background:var(--gold);color:#fff}
.qv-btn-edit:hover{background:var(--gold-dark)}
.qv-btn-dup{background:var(--surface-soft);color:var(--charcoal);border:1.5px solid var(--border)}
.qv-btn-dup:hover{border-color:var(--gold);color:var(--gold-dark)}
.qv-btn-pub{background:var(--surface-soft);color:var(--charcoal);border:1.5px solid var(--border)}
.qv-btn-pub:hover{border-color:var(--gold);color:var(--gold-dark)}
.qv-btn-del{background:#fff3f3;color:var(--red);border:1.5px solid rgba(232,93,93,.25)}
.qv-btn-del:hover{background:var(--red);color:#fff}
.qv-btn-archive{background:var(--surface-soft);color:var(--muted);border:1.5px solid var(--border)}
.qv-btn-archive:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.qv-right{display:contents}
@media(min-width:901px){
  .qv-panel{flex-direction:row;max-width:880px;height:min(78vh,600px)}
  .qv-img-zone{flex:0 0 380px}
  #qv-img-container{height:100%;display:flex;flex-direction:column}
  #qv-img-container>img{flex:1;min-height:0}
  #qv-img-container .qv-gallery{flex:1;min-height:0}
  #qv-img-container .qv-gallery-img{height:100%}
  .qv-gallery-dots{flex-shrink:0}
  .qv-right{display:flex;flex-direction:column;flex:1;min-width:0;overflow:hidden}
}
@media(max-width:600px){
  #qv-overlay{align-items:flex-end;padding:0;gap:0}
  .qv-panel{max-width:100%;border-radius:20px 20px 0 0;max-height:93vh;transform:translateY(30px)}
  #qv-overlay.open .qv-panel{transform:translateY(0)}
  .qv-panel::before{content:'';display:block;width:36px;height:4px;background:rgba(28,24,23,.15);border-radius:2px;margin:10px auto 0;flex-shrink:0}
  .qv-outer-nav{display:none}
}

/* ── VALIDACIÓN DE CAMPOS ── */
.field-invalid > input,
.field-invalid > select,
.field-invalid > textarea,
.field-invalid > .field-label-row + input,
.field-invalid > .field-label-row + select {
  border-color:var(--red)!important;
  background:#FFF8F8!important;
  box-shadow:0 0 0 3px rgba(232,93,93,.1)!important;
}
.field-error-msg{
  font-size:.72rem;color:var(--red);margin-top:5px;
  display:flex;align-items:center;gap:4px;font-weight:500;
}

/* ── SECCIONES DEL FORMULARIO ── */
.form-section{
  font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-light);margin:18px 0 12px;
  padding-top:16px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:7px;
}
.form-section:first-child{margin-top:4px;border-top:none;padding-top:0}

/* Kit editor */
.kit-comp-row{display:flex;align-items:center;gap:8px;padding:5px 6px;border-bottom:1px solid var(--border);font-size:.82rem}
.kit-comp-row:last-child{border-bottom:none}
.kit-comp-img{width:26px;height:26px;object-fit:cover;border-radius:4px;flex-shrink:0;border:1px solid var(--border);background:var(--surface-soft)}
.kit-comp-name{flex:1;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kit-comp-stock{font-size:.74rem;flex-shrink:0}
.kit-comp-qty{display:flex;align-items:center;gap:4px;flex-shrink:0}
.kit-comp-qty button{width:22px;height:22px;border-radius:5px;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-size:.85rem;display:flex;align-items:center;justify-content:center;line-height:1;font-weight:700;color:var(--charcoal)}
.kit-comp-qty span{min-width:18px;text-align:center;font-weight:700;font-size:.82rem}
.kit-comp-remove{width:22px;height:22px;border-radius:5px;border:1px solid #EDE5DC;background:#FFF0EE;color:var(--red);cursor:pointer;font-size:.7rem;flex-shrink:0;display:flex;align-items:center;justify-content:center;line-height:1}

/* Upload zone */
.img-upload-zone{border:2px dashed var(--border);border-radius:var(--r);padding:22px 20px;text-align:center;transition:.2s;background:var(--surface-soft);margin-bottom:8px}
.img-upload-zone.drag-over{border-color:var(--gold);background:var(--gold-light);box-shadow:0 0 0 4px rgba(201,164,98,.12)}
.img-upload-zone .up-icon{font-size:1.8rem;margin-bottom:6px}
.img-upload-zone .up-text{font-size:.82rem;color:var(--muted-light);margin-bottom:12px}
/* Botones de carga de imagen */
.img-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.btn-cam{background:var(--gold);color:#fff;border:none;box-shadow:0 2px 8px rgba(201,164,98,.35)}
.btn-cam:hover{background:var(--gold-dark);color:#fff;transform:translateY(-1px);box-shadow:0 4px 14px rgba(201,164,98,.45)}

/* Drag & drop table */
tr[draggable="true"]{cursor:grab}
tr[draggable="true"]:active{cursor:grabbing}
tr.dragging{opacity:.3;background:var(--gold-light)}
tr.drop-above{box-shadow:0 -3px 0 var(--gold);background:var(--gold-light)}
tr.drop-below{box-shadow:0 3px 0 var(--gold);background:var(--gold-light)}
.drag-handle{cursor:grab;color:#D5C9BC;padding:0 6px;font-size:1rem;user-select:none;transition:.15s}
/* Drag & drop cards */
.admin-card[draggable="true"]{cursor:grab}
.admin-card[draggable="true"]:active{cursor:grabbing}
.admin-card.card-dragging{opacity:.3;transform:scale(.97);pointer-events:none}
.admin-card.card-drop-before{box-shadow:0 -3px 0 var(--gold),var(--shadow-sm);background:var(--gold-light)}
.admin-card.card-drop-after{box-shadow:0 3px 0 var(--gold),var(--shadow-sm);background:var(--gold-light)}
.drag-handle:hover{color:var(--gold)}

/* Strikethrough price */
.orig-price-cell{font-size:.73rem;color:var(--muted-light);text-decoration:line-through;display:block;margin-bottom:2px}

/* ══ BULK BAR ═══════════════════════════════════════════════════════════ */
.bulk-bar{
  display:flex;gap:8px;align-items:center;
  padding:10px 16px;
  background:var(--ink);color:#fff;
  border-radius:var(--r);
  position:sticky;top:64px;z-index:40;margin-bottom:14px;
  box-shadow:0 4px 20px rgba(28,24,23,.25);
}
.bulk-bar #bulk-count{font-size:.84rem;font-weight:700;margin-right:6px;color:var(--gold);flex-shrink:0}
.bulk-bar-scroll-wrap{position:relative;flex:1;min-width:0}
.bulk-bar-scroll-wrap::after{
  content:'';
  position:absolute;top:0;bottom:0;right:0;width:22px;
  background:linear-gradient(to right,transparent,var(--charcoal) 85%);
  opacity:.9;pointer-events:none;transition:opacity .15s;
}
.bulk-bar-scroll-wrap.at-end::after{opacity:0}
.bulk-bar-scroll{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bulk-bar .btn{font-size:.78rem;padding:6px 14px;border:1.5px solid rgba(255,255,255,.2);color:#fff;background:transparent;border-radius:50px;flex-shrink:0}
.bulk-bar .btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
.bulk-bar .btn-red{background:var(--red);border-color:var(--red)}
.bulk-bar .btn-red:hover{background:#c84444}

/* ══ BULK: MÁS ACCIONES (sheet) ══ */
#bulk-more-overlay{position:fixed;inset:0;z-index:1300;background:rgba(0,0,0,.45);display:none;align-items:flex-end;justify-content:center}
#bulk-more-overlay.open{display:flex}
/* Menú unificado "Agregar" (FAB, mobile/tablet chico) -- mismo patrón de
   bottom sheet que #bulk-more-overlay, reutiliza .bmo-item tal cual. */
#add-menu-overlay{position:fixed;inset:0;z-index:1300;background:rgba(0,0,0,.45);display:none;align-items:flex-end;justify-content:center}
#add-menu-overlay.open{display:flex}
#add-menu-sheet{background:var(--surface);border-radius:20px 20px 0 0;width:100%;max-width:600px;max-height:82dvh;overflow-y:auto;padding:8px 8px calc(24px + env(safe-area-inset-bottom));overscroll-behavior:contain}
#bulk-more-sheet{background:var(--surface);border-radius:20px 20px 0 0;width:100%;max-width:600px;max-height:82dvh;display:flex;flex-direction:column}
.bmo-list{overflow-y:auto;padding:8px 8px calc(24px + env(safe-area-inset-bottom));overscroll-behavior:contain}
.bmo-list .bcp-group-label{padding-left:12px}
.bmo-item{display:flex;align-items:center;gap:12px;width:100%;padding:13px 12px;border:none;background:none;border-radius:12px;font-size:.9rem;font-weight:600;color:var(--charcoal);cursor:pointer;font-family:inherit;text-align:left;touch-action:manipulation;min-height:44px}
.bmo-item:active{background:var(--gold-light)}
.bmo-item svg{flex-shrink:0;color:var(--muted)}
tr.row-selected td{background:var(--gold-light) !important}
input.row-check{cursor:pointer;width:16px;height:16px;accent-color:var(--gold)}

/* ══ LOADING SPINNER ════════════════════════════════════════════════════ */
@keyframes spin{to{transform:rotate(360deg)}}
[data-loading]{opacity:.65;pointer-events:none;cursor:default}
[data-loading]::after{content:'';display:inline-block;width:11px;height:11px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .65s linear infinite;margin-left:8px;vertical-align:middle}
.btn-login[data-loading]::after{width:14px;height:14px}

/* ══ PRODUCT COUNT ══════════════════════════════════════════════════════ */
.prod-count{margin-left:auto;padding:0 4px;font-size:.86rem;color:var(--muted);white-space:nowrap;flex-shrink:0;font-variant-numeric:tabular-nums}
/* "Seleccionar los N" en la barra de selección: acción secundaria, como enlace */
.bulk-bar .btn.bulk-select-all{border-color:transparent;color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* ══ STOCK CHIPS ════════════════════════════════════════════════════════ */
.stock-chip{display:inline-flex;align-items:center;gap:3px;font-size:.69rem;font-weight:700;padding:4px 10px;min-height:28px;border-radius:50px;white-space:nowrap;border:1.5px solid transparent}
/* Número de piezas en neutro: el color queda solo para Agotado (rojo) y
   Apartado. Antes 3 = verde y 1 = ámbar en todo el catálogo. */
.stock-ok,.stock-one{background:var(--surface-soft);color:var(--charcoal);border-color:var(--border)}
.stock-sold{background:#FEF2F2;color:#991B1B;border-color:#FECACA}
.stock-apt{background:#FEF3C7;color:#92400E;border-color:#FDE68A}
.stock-chip.stock-chip-editing,.qv-chip.stock-chip-editing,.recv-badge.stock-chip-editing{box-shadow:0 0 0 3px rgba(201,164,98,.35);border-radius:50px}
.ac-price.field-value-editing,.mpc-price.field-value-editing,.price-cell.field-value-editing{box-shadow:0 0 0 3px rgba(201,164,98,.35);border-radius:6px}

/* ══ CAMPO EDIT POPOVER — cápsula flotante anclada a un valor editable en
   línea (stock, precio, …). Reemplaza el patrón anterior de insertar el
   editor EN la fila, apretado junto a los demás controles/badges. Reusar
   estas clases genéricas .field-pop-* para cualquier campo nuevo en vez de
   crear un editor a medida por campo. ══════════════════════════════════ */
.field-pop-backdrop{position:fixed;inset:0;z-index:9990;background:transparent}
.field-pop{position:fixed;z-index:9991;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:14px;width:216px;animation:fieldPopIn .15s ease-out}
@keyframes fieldPopIn{from{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.field-pop-label{font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:10px;text-align:center}
.field-pop-stepper{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px}
.field-pop-stepper button{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface-soft);font-size:1.25rem;font-weight:700;color:var(--charcoal);cursor:pointer;touch-action:manipulation;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.15s;font-family:inherit}
.field-pop-stepper button:active{background:var(--gold-light);border-color:var(--gold)}
.field-pop-stepper input{width:56px;padding:8px 4px;border:1.5px solid var(--gold);border-radius:var(--r-sm);font-size:1.15rem;font-weight:700;text-align:center;outline:none;font-family:inherit;color:var(--charcoal);background:var(--surface-soft)}
.field-pop-input-row{display:flex;align-items:center;justify-content:center;gap:2px;margin-bottom:14px}
.field-pop-currency{font-size:1.1rem;font-weight:700;color:var(--muted)}
.field-pop-input-row input{width:120px;padding:8px 6px;border:1.5px solid var(--gold);border-radius:var(--r-sm);font-size:1.15rem;font-weight:700;text-align:center;outline:none;font-family:inherit;color:var(--charcoal);background:var(--surface-soft)}
.field-pop-actions{display:flex;align-items:center;justify-content:space-between;gap:8px}
.field-pop-cancel{background:none;border:none;color:var(--muted);font-size:.82rem;font-weight:600;padding:10px 8px;cursor:pointer;font-family:inherit;touch-action:manipulation}
.field-pop-save{flex:1;background:var(--gold);border:none;color:#fff;border-radius:var(--r-sm);padding:10px 14px;font-size:.85rem;font-weight:700;cursor:pointer;font-family:inherit;touch-action:manipulation}
.field-pop-save:active{background:var(--gold-dark)}

/* ══ AI ANALYZE BUTTON (formulario de producto) ════════════════════════ */
#ai-form-wrap{margin-top:10px;transition:opacity .3s}
.btn-ai-form{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:10px 16px;
  background:linear-gradient(135deg,var(--ink),var(--ink-soft));
  color:var(--gold);border:1.5px solid var(--gold);border-radius:10px;
  font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:.2s;
}
.btn-ai-form:hover:not(:disabled){background:var(--gold);color:#fff;transform:translateY(-1px);box-shadow:0 4px 14px rgba(201,164,98,.4)}
.btn-ai-form:disabled{opacity:.6;cursor:not-allowed;transform:none!important}
.btn-ai-form .ai-spinner{width:14px;height:14px;border:2px solid rgba(201,164,98,.3);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
#ai-key-prompt{background:var(--gold-light);border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;margin-top:8px}
#ai-key-prompt p{margin:0 0 8px;font-size:.78rem;color:var(--charcoal)}
#ai-key-prompt-wrap{display:flex;gap:6px}
#ai-key-prompt-input{flex:1;padding:7px 10px;border:1.5px solid var(--border);border-radius:8px;font-size:.82rem;font-family:inherit;outline:none;background:var(--surface);color:var(--charcoal)}
#ai-key-prompt-input:focus{border-color:var(--gold)}
@keyframes ai-field-flash{0%{background:rgba(201,164,98,.25);border-color:var(--gold)}100%{background:transparent;border-color:var(--border)}}
.ai-filled{animation:ai-field-flash 1.5s ease forwards;border-radius:var(--r-sm)}

/* ══ INLINE EDIT — categoría y visibilidad ═══════════════════════════════ */
.cat-label-inline{cursor:pointer;border-bottom:1px dashed transparent;transition:border-color .15s,color .15s;touch-action:manipulation;display:inline-block;padding:8px 4px}
.cat-label-inline:hover{border-bottom-color:var(--gold);color:var(--gold-dark)}
.pub-toggle{
  font-size:.67rem;font-weight:700;padding:4px 10px;border-radius:50px;
  flex-shrink:0;white-space:nowrap;border:1.5px solid;cursor:pointer;
  touch-action:manipulation;font-family:inherit;line-height:1;transition:all .15s;
  min-height:28px;display:inline-flex;align-items:center;gap:4px;
}
/* Vista de tarjetas: columnas angostas — el chip de stock fusionado
   ("0 · Agotado") ya casi llena el ancho, así que Web/Oculto se queda
   solo con el ícono para no partirse a una segunda línea. */
.admin-cards-grid .pub-toggle{padding:6px;border-radius:50%;gap:0;min-width:28px;justify-content:center}
.admin-cards-grid .pub-toggle-lbl{display:none}
.admin-cards-grid .pub-toggle svg{margin-right:0!important}
.te-switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.te-switch input{opacity:0;width:0;height:0}
.te-switch-slider{position:absolute;inset:0;background:#D1C4B8;border-radius:50px;cursor:pointer;transition:.2s}
.te-switch-slider::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:var(--surface);border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.te-switch input:checked + .te-switch-slider{background:var(--green)}
.te-switch input:checked + .te-switch-slider::before{transform:translateX(20px)}
.pub-hidden{background:#F8FAFC;color:#64748B;border-color:#CBD5E1}
.pub-hidden:hover{background:#E2E8F0;color:#475569;border-color:#94A3B8}
.pub-visible{background:#ECFDF5;color:#047857;border-color:#6EE7B7}
.pub-visible:hover{background:#D1FAE5;color:#065F46;border-color:#34D399}

/* ══ VOICE DICTATION ════════════════════════════════════════════════════ */
.field-label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.field-label-row label{margin-bottom:0;flex:1}
.f-cat-btn{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--r);font-size:.9rem;background:var(--surface-soft);font-family:inherit;color:var(--charcoal);cursor:pointer;display:flex;align-items:center;gap:8px;text-align:left;transition:.2s}
.f-cat-btn:hover,.f-cat-btn:focus{border-color:var(--gold);background:var(--surface);box-shadow:0 0 0 3px rgba(201,164,98,.12);outline:none}
.f-cat-arrow{margin-left:auto;color:var(--muted-light);font-size:.8rem}
.btn-oferta-toggle{width:100%;padding:9px 14px;border:1.5px dashed var(--gold);border-radius:var(--r);background:var(--gold-light);color:var(--gold-dark);font-size:.82rem;font-weight:600;cursor:pointer;font-family:inherit;text-align:left;transition:.15s}
.btn-oferta-toggle:hover{background:var(--cream-dark);border-color:var(--gold-dark)}
.dictate-btn{
  font-size:.68rem;font-weight:600;padding:3px 10px;border-radius:50px;
  border:1.5px solid var(--border);background:var(--surface);cursor:pointer;
  color:var(--muted);display:inline-flex;align-items:center;gap:4px;
  transition:.15s;white-space:nowrap;flex-shrink:0;
}
.dictate-btn:hover{border-color:var(--gold);color:var(--gold-dark);background:var(--gold-light)}
/* ── Editor de descripción ──────────────────────────────── */
.desc-editor-wrap{border:1.5px solid var(--border);border-radius:10px;overflow:hidden;transition:border-color .15s}
.desc-editor-wrap:focus-within{border-color:var(--gold)}
.desc-toolbar{display:flex;align-items:center;gap:2px;padding:5px 8px;background:var(--surface-soft);border-bottom:1px solid var(--border)}
.dtb-btn{display:flex;align-items:center;gap:4px;padding:5px 7px;border-radius:6px;border:none;background:transparent;color:var(--charcoal);cursor:pointer;font-family:inherit;font-size:.78rem;font-weight:600;transition:.12s;touch-action:manipulation;white-space:nowrap}
.dtb-btn:hover{background:var(--border);color:var(--gold-dark)}
.dtb-btn:active{opacity:.6}
.dtb-btn b{font-size:.9rem;font-weight:900;letter-spacing:-.5px}
.dtb-btn i{font-size:.9rem;font-style:italic;font-weight:700}
.dtb-btn svg{flex-shrink:0}
.dtb-label{font-size:.7rem;font-weight:600}
.dtb-sep{width:1px;height:18px;background:var(--border);margin:0 3px;flex-shrink:0}
.dtb-clear{color:var(--muted);margin-left:auto}
.desc-editor-wrap .desc-editor-ta{width:100%;min-height:90px;padding:10px 12px;border:none;border-radius:0;outline:none;font-family:inherit;font-size:.88rem;color:var(--charcoal);line-height:1.65;resize:vertical;background:var(--surface);box-sizing:border-box}
/* Mobile: ocultar B, I, separador de formato */
@media(max-width:640px){
  .dtb-fmt{display:none}
  .dtb-label{display:none}
}
.dictate-btn.recording{
  background:#FEE2E2;border-color:var(--red);color:var(--red);
  animation:pulse-rec 1.1s ease-in-out infinite;
}
.btn-clear-field{color:var(--muted-light);border-color:transparent;background:transparent;font-size:.8rem}
.btn-clear-field:hover{color:var(--red);background:#FEF2F2;border-color:#FECACA}
@keyframes pulse-rec{0%,100%{opacity:1}50%{opacity:.55}}
/* Campo en modo grabación */
.field-recording{
  border-color:var(--red)!important;background:#FFF5F5!important;
  animation:pulse-field-rec 1.2s ease-in-out infinite;
}
@keyframes pulse-field-rec{
  0%,100%{box-shadow:0 0 0 3px rgba(232,93,93,.15)}
  50%{box-shadow:0 0 0 6px rgba(232,93,93,.08)}
}

/* ══ SCANNER ════════════════════════════════════════════════════════════ */
.scanner-wrap{position:relative;background:#111;border-radius:var(--r);overflow:hidden;min-height:260px;display:flex;align-items:center;justify-content:center}
#scanner-reader{width:100%}
#scanner-reader video,#scanner-reader canvas{width:100%!important;max-width:100%!important;height:auto!important;border-radius:var(--r)}

/* ══ EMPTY STATE ════════════════════════════════════════════════════════ */
.empty-state{text-align:center;padding:80px 20px}
.empty-state .es-icon{font-size:2.8rem;margin-bottom:14px}
.empty-state p{color:var(--muted);margin-bottom:20px;font-size:.92rem;line-height:1.6}

/* ══ ADD TO KIT PICKER ══════════════════════════════════════════════════ */
#atk-overlay{position:fixed;inset:0;z-index:1300;background:rgba(0,0,0,.45);display:none;align-items:flex-end;justify-content:center}
#atk-overlay.open{display:flex}
#atk-sheet{background:var(--surface);border-radius:20px 20px 0 0;width:100%;max-width:600px;max-height:70dvh;display:flex;flex-direction:column}
.atk-kit-row{display:flex;align-items:center;gap:12px;padding:10px 6px;border-radius:10px;cursor:pointer;transition:background .12s;border-bottom:1px solid var(--border)}
.atk-kit-row:hover{background:var(--gold-light)}
.atk-kit-row:last-child{border-bottom:none}
.atk-kit-img{width:44px;height:44px;object-fit:cover;border-radius:8px;background:var(--surface-soft);flex-shrink:0}
.atk-kit-info{flex:1;min-width:0}
.atk-kit-name{font-size:.88rem;font-weight:600;color:var(--charcoal);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.atk-kit-comps{font-size:.72rem;color:var(--muted);margin-top:2px}
.atk-kit-add{background:var(--gold);color:#fff;border:none;border-radius:50px;padding:5px 14px;font-size:.75rem;font-weight:700;cursor:pointer;flex-shrink:0;font-family:inherit;transition:opacity .12s}
.atk-kit-add:hover{opacity:.85}

/* ══ BULK CATEGORY PICKER ═══════════════════════════════════════════════ */
#bulk-cat-overlay{position:fixed;inset:0;z-index:1300;background:rgba(0,0,0,.45);display:none;align-items:flex-end;justify-content:center}
#bulk-cat-overlay.open{display:flex}
#bulk-cat-sheet{background:var(--surface);border-radius:20px 20px 0 0;width:100%;max-width:600px;max-height:82dvh;display:flex;flex-direction:column}
.bcp-head{padding:18px 20px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);flex-shrink:0}
.bcp-title{font-weight:700;font-size:.95rem;color:var(--charcoal)}
.bcp-sub{font-size:.75rem;color:var(--muted);margin-top:2px}
.bcp-close{background:none;border:none;font-size:1.1rem;cursor:pointer;color:var(--muted);touch-action:manipulation;padding:4px 8px}
.bcp-search{padding:10px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.bcp-search input{width:100%;padding:9px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:.88rem;font-family:inherit;outline:none;box-sizing:border-box;background:var(--surface-soft);color:var(--charcoal)}
.bcp-search input:focus{border-color:var(--gold)}
.bcp-list{flex:1;overflow-y:auto;padding:12px 16px 24px;overscroll-behavior:contain}
.bcp-group-label{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:14px 0 7px;padding-top:10px;border-top:1px solid var(--border)}
.bcp-group-label:first-child{border-top:none;padding-top:0;margin-top:0}
.bcp-chips{display:flex;flex-wrap:wrap;gap:7px}
.bcp-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:50px;border:1.5px solid var(--border);background:var(--surface);font-size:.84rem;font-weight:600;cursor:pointer;touch-action:manipulation;transition:.15s;color:var(--charcoal)}
.bcp-chip:active,.bcp-chip.selected{border-color:var(--gold);background:var(--gold-light)}
.bcp-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.bcp-sub-chip{padding:6px 12px;font-size:.78rem;font-weight:500;margin-left:8px}

/* ══ UNDO BAR ═══════════════════════════════════════════════════════════ */
.undo-bar{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(110px);background:var(--ink);color:#fff;padding:10px 10px 10px 18px;border-radius:50px;display:flex;align-items:center;gap:10px;font-size:.82rem;z-index:490;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s;opacity:0;max-width:min(90vw,400px);box-shadow:0 6px 28px rgba(28,24,23,.3)}
.undo-bar.show{transform:translateX(-50%) translateY(0);opacity:1}
.undo-bar .undo-msg{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.undo-bar button{background:var(--gold);border:none;color:#fff;padding:7px 16px;border-radius:50px;font-size:.76rem;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s;flex-shrink:0;white-space:nowrap}
.undo-bar button:hover{background:var(--gold-dark)}
/* Action bar — igual que undo-bar pero con acción personalizada */
.action-bar{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(110px);background:var(--ink);color:#fff;padding:10px 10px 10px 18px;border-radius:50px;display:flex;align-items:center;gap:10px;font-size:.82rem;z-index:489;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s;opacity:0;max-width:min(90vw,400px);box-shadow:0 6px 28px rgba(28,24,23,.3)}
.action-bar.show{transform:translateX(-50%) translateY(0);opacity:1}
.action-bar button{background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.3);color:#fff;padding:6px 14px;border-radius:50px;font-size:.76rem;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s;flex-shrink:0;white-space:nowrap}
.action-bar button:hover{background:rgba(255,255,255,.28)}

/* ══ SCROLL TO TOP ══════════════════════════════════════════════════════ */
#scroll-top-btn{position:fixed;bottom:28px;right:24px;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;border:none;font-size:1rem;cursor:pointer;box-shadow:0 4px 18px rgba(28,24,23,.25);z-index:400;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;display:flex;align-items:center;justify-content:center}
#scroll-top-btn.show{opacity:1;pointer-events:all;transform:translateY(0)}
#scroll-top-btn:hover{background:var(--ink-soft);transform:translateY(-2px)!important}
@media(max-width:640px){
  /* scroll-top encima del FAB */
  #scroll-top-btn{bottom:calc(92px + env(safe-area-inset-bottom));right:16px;width:38px;height:38px;font-size:.9rem}
}

/* ══ TOAST ══════════════════════════════════════════════════════════════ */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--ink);color:#fff;padding:11px 22px;border-radius:50px;font-size:.84rem;font-weight:500;z-index:9999;transition:.3s ease;opacity:0;max-width:min(90vw,380px);text-align:center;box-shadow:0 4px 20px rgba(28,24,23,.25);line-height:1.45}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast.success{background:var(--green)}
.toast.error{background:var(--red)}

/* ══ FAB — botón flotante + Agregar (mobile) ══════════════════════════ */
.fab-add{
  position:fixed;bottom:24px;right:16px;z-index:110;
  width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-dark) 100%);
  color:#fff;
  font-size:1.9rem;font-weight:300;line-height:58px;text-align:center;
  border:none;cursor:pointer;display:none;
  box-shadow:0 6px 24px rgba(201,164,98,.5),0 2px 8px rgba(0,0,0,.18);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s;
  -webkit-tap-highlight-color:transparent;
}
.fab-add:active{transform:scale(.88);box-shadow:0 3px 12px rgba(201,164,98,.4)}
/* Chip de producto por caducar / caducado */
.exp-chip{display:inline-flex;align-items:center;gap:2px;font-size:.68rem;font-weight:700;border-radius:50px;padding:2px 7px;white-space:nowrap;cursor:default}
.exp-chip-soon{background:#FEF3C7;color:#92400E;border:1.5px solid #FDE68A}
.exp-chip-expired{background:#FEE2E2;color:#B91C1C;border:1.5px solid #FCA5A5}
/* Kit Builder */
#kit-builder-overlay{display:none}
#kit-builder-overlay.kb-open{display:flex;opacity:1;pointer-events:auto}
#kit-builder-overlay{align-items:flex-end}
.kb-modal{max-width:600px;border-radius:20px 20px 0 0}
.kb-body{display:flex;flex-direction:column;gap:14px}
.kb-col-left,.kb-col-right{display:contents}
@media(min-width:901px){
  #kit-builder-overlay{align-items:center}
  .kb-modal{max-width:760px;border-radius:20px;max-height:85vh}
  .kb-body{flex-direction:row;gap:24px;align-items:flex-start}
  .kb-col-left{display:flex;flex-direction:column;gap:14px;flex:0 0 280px}
  .kb-col-right{display:flex;flex-direction:column;gap:14px;flex:1;min-width:0}
}
.kb-input{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:.92rem;font-family:inherit;outline:none;box-sizing:border-box;transition:.15s;background:var(--surface-soft);color:var(--charcoal)}
.kb-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,164,98,.1)}
.kb-label{font-size:.75rem;font-weight:700;color:var(--muted);display:block;margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em}
.kb-comp{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1.5px solid var(--border);border-radius:10px;margin-bottom:6px;background:var(--surface)}
.kb-qty-btn{width:28px;height:28px;border-radius:7px;border:1.5px solid var(--border);background:var(--surface);font-size:1rem;font-weight:700;cursor:pointer;touch-action:manipulation;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.kb-result-item{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--border);cursor:pointer;touch-action:manipulation}
.kb-result-item:last-child{border-bottom:none}
.kb-result-item:active{background:var(--gold-light)}

/* ══ LISTA COMO TARJETAS MPC (mobile + tablet ≤1024px) ════════════════════
   La vista lista usa tarjetas en ambos tamaños. El bloque ≤640px sobreescribe
   con tamaños más compactos para teléfono.
   ═════════════════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  /* ── Tabla → tarjetas ── */
  .table-wrap{border:none;background:transparent;box-shadow:none;overflow:visible}
  .table-wrap table{display:block}
  .table-wrap thead{display:none}
  .table-wrap tbody{display:flex;flex-direction:column;gap:4px}
  .table-wrap tr.mpc-row{display:block}
  .table-wrap tr.mpc-row td{display:block;padding:0;border:none}
  .table-wrap tr.mpc-row:hover td{background:transparent!important}
  tr.row-selected .mpc{border-color:var(--gold)!important;background:var(--gold-light)!important;box-shadow:0 3px 14px rgba(201,164,98,.18)!important}
  tr.row-selected td{background:transparent!important}
  tr .drag-handle{opacity:0}

  /* ── Tarjeta MPC — tamaños tablet (mobile ≤640px sobreescribe abajo) ── */
  .mpc{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color .18s,box-shadow .18s,transform .12s;box-shadow:0 1px 4px rgba(28,24,23,.06)}
  .mpc.mpc-oos{opacity:.75;box-shadow:0 1px 3px rgba(28,24,23,.04)}
  .mpc-top:active{background:rgba(201,164,98,.04)}
  .mpc-top{display:flex;gap:12px;padding:12px 14px 10px;align-items:flex-start}
  .mpc-img-wrap{position:relative;flex-shrink:0}
  .mpc-img{width:72px;height:72px;object-fit:contain;border-radius:11px;border:1px solid var(--border-light);display:block;background:#fff}
  .mpc-check-over{-webkit-appearance:none;appearance:none;position:absolute;top:4px;left:4px;width:22px;height:22px;border:2.5px solid rgba(255,255,255,.9);border-radius:50%;background:rgba(0,0,0,.28) center/60% no-repeat;box-shadow:0 1px 5px rgba(0,0,0,.3);cursor:pointer;opacity:0;transition:opacity .15s,background .12s,transform .1s}
  .selection-active .mpc-check-over{opacity:1}
  .mpc-check-over:checked{background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='white' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/58% no-repeat;border-color:var(--gold);transform:scale(1.1)}
  tr.row-selected .mpc-img{filter:brightness(.82)}
  .mpc-info{flex:1;min-width:0;padding-top:0;display:flex;flex-direction:column;gap:3px}
  .mpc-name{font-weight:700;font-size:.92rem;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--charcoal);letter-spacing:-.01em}
  .mpc-cat-tag{display:flex;align-items:center;gap:5px;font-size:.69rem;color:var(--muted);margin:0;flex-wrap:wrap}
  .mpc-cat-tag .cat-label-inline{background:var(--cream);border:1px solid var(--border-light)!important;border-bottom:1px solid var(--border-light)!important;padding:5px 9px;border-radius:50px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
  .mpc-cat-tag .cat-label-inline:hover{background:var(--surface-soft);border-color:var(--gold)!important;color:var(--gold-dark)}
  .mpc-price-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:6px;border-top:1px solid var(--border-light)}
  .mpc-price{font-size:1.2rem;font-weight:700;font-family:'Playfair Display',serif;line-height:1;color:var(--charcoal)}
  .mpc-price-orig{font-size:.74rem;color:var(--muted-light);text-decoration:line-through;font-family:'Inter',sans-serif}
  .mpc-stock-inline{margin-left:0}
  .mpc-star{position:absolute;bottom:5px;right:5px;background:transparent;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));border:none;border-radius:8px;padding:3px 5px;font-size:.8rem;cursor:pointer;line-height:1;transition:.15s;touch-action:manipulation}
  .mpc-star.feat-active{background:#FFF8E7;color:#C9A462;box-shadow:0 1px 5px rgba(0,0,0,.14);filter:none}
}

/* ══ MOBILE ═════════════════════════════════════════════════════════════
   Breakpoint 640px: sobreescribe tamaños MPC para teléfono, bottom sheet
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:640px){
  /* Espacio extra abajo: la última tarjeta no debe quedar tapada por el FAB "+" ni por #scroll-top-btn (el cálculo ya lo dominaba este lado -- quitar el FAB de Kit del lado izquierdo no cambia el valor) */
  main{padding:14px 12px calc(136px + env(safe-area-inset-bottom))}

  /* Fix iOS zoom en inputs < 16px */
  input,select,textarea{font-size:16px!important;-webkit-appearance:none}
  select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B5C48' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}

  /* Safe area iPhone notch */

  .bulk-bar{top:calc(64px + env(safe-area-inset-top))}

  /* Targets táctiles mínimos 44px */
  .btn,.btn-login{min-height:44px}

  /* ── TOPBAR ─────────────────────────────────────────────────── */
  .topbar{
    padding-left:12px;padding-right:12px;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;gap:0;
  }
  .topbar-left{display:contents}
  .user-name{display:none}
  .user-avatar{width:26px;height:26px;font-size:.7rem}
  /* Caja en topbar redundante con bottom nav — ocultar en mobile */
  .topbar-right .btn-gold{display:none}

  /* ── Pestañas: mismo padding que la tarjeta en celular ── */
  .inv-tabs-row{width:calc(100% + 24px);margin:-12px -12px 4px;padding:0 12px;gap:8px}
  .inv-tabs{gap:18px}
  /* En celular solo la pestaña activa muestra su número: así caben las 4
     pestañas completas a todo el ancho (Pendientes baja a la fila de filtros). */
  .inv-tab:not(.active) .inv-tab-n{display:none}
  .tb-filter-row .pend-wrap{min-width:0}
  .tb-filter-row .pend-clear{display:none!important} /* en celular se quita desde el menú ("Quitar filtro") */
  .toolbar .tb-filter-row #cat-filter-btn{min-width:0}
  .tb-filter-row .pend-btn{min-height:42px;min-width:0;max-width:100%}
  /* Lista/Cuadrícula se elige en "Ordenar y ver" (botón ⇅); por defecto Lista */
  .tb-filter-row .view-toggle{display:none}
  /* Filtros en celular: Categoría a lo ancho, Ordenar como botón de solo ícono
     (patrón Shopify móvil) -- con texto, ambos se cortaban ("Todas la…", "Edit…"). */
  .lbl-long{display:none}
  .lbl-short{display:inline}
  .toolbar .tb-filter-row #sort-filter-btn{flex:0 0 44px;width:44px;height:44px;min-width:0;max-width:none;padding:0;justify-content:center;border-radius:50%}
  .toolbar .tb-filter-row #sort-filter-btn #sort-filter-btn-label,.toolbar .tb-filter-row #sort-filter-btn #sort-filter-btn-arrow{display:none}
  .toolbar .tb-filter-row #sort-filter-btn .fb-ico{width:18px;height:18px;color:var(--charcoal)}

  /* FAB — mostrar en mobile */
  .fab-add{display:flex;align-items:center;justify-content:center;bottom:calc(24px + env(safe-area-inset-bottom))}
  /* Toolbar — ocultar btn Agregar (reemplazado por FAB) */
  .toolbar > .btn-gold,.tb-search-row .btn-gold{display:none}
  /* Toolbar: búsqueda en fila propia, categoría+sort comparten fila */
  .toolbar{flex-wrap:wrap;gap:8px;margin-bottom:14px;padding:12px 12px;border-radius:var(--r)}
  #cat-filter{display:none}
  #cat-filter-btn{display:flex}
  .search-wrap{flex:1;min-width:0}
  #sort-filter-btn{flex:1;min-width:0}
  .prod-count{display:none}
  /* Búsqueda + escanear: fila propia a todo lo ancho */
  .tb-search-row{flex-wrap:wrap}
  .search-scan-row{order:-1;flex:0 0 100%}
  .search-scan-btn{display:flex}
  /* Fila de píldoras (Captura/Escanear/Recibir/Importar) retirada -- ver
     #add-menu-overlay (menú del FAB) y #search-scan-btn (junto al buscador) */
  .tb-actions-wrap{display:none}
  /* Filtros: ocultar creador en mobile, liberar espacio */
  .tb-filter-row #creator-filter-wrap{display:none!important}
  /* Antes: .98rem en categoría vs .80rem en orden -- misma clase de pill,
     tamaño de letra inconsistente sin ninguna razón. Unificado. */
  .tb-filter-row #cat-filter-btn{flex:1;max-width:none;font-size:.88rem}
  .tb-filter-row #sort-filter-btn{flex:1;max-width:none;font-size:.88rem}
  /* View toggle: alinear al final de la fila de orden */
  .view-toggle{flex-shrink:0}

  /* Bulk bar — 2 filas: ✕/contador arriba, acciones abajo en todo el ancho */
  .bulk-bar{top:64px;padding:8px 12px;border-radius:var(--r);flex-wrap:wrap;row-gap:8px}
  .bulk-bar-scroll-wrap{flex-basis:100%}
  .bulk-bar-scroll{flex-wrap:nowrap;overflow-x:auto;gap:6px;scrollbar-width:none}
  .bulk-bar-scroll::-webkit-scrollbar{display:none}
  .bulk-bar .btn{flex-shrink:0;font-size:.72rem;padding:6px 10px}

  /* Tabla → tarjetas */
  .table-wrap{border:none;background:transparent;box-shadow:none;overflow:visible}
  .table-wrap table{display:block}
  .table-wrap thead{display:none}
  .table-wrap tbody{display:flex;flex-direction:column;gap:4px}
  .table-wrap tr.mpc-row{display:block}
  .table-wrap tr.mpc-row td{display:block;padding:0;border:none}
  .table-wrap tr.mpc-row:hover td{background:transparent!important}
  tr.row-selected .mpc{
    border-color:var(--gold)!important;background:var(--gold-light)!important;
    box-shadow:inset 4px 0 0 var(--gold), 0 3px 14px rgba(201,164,98,.18)!important;
  }
  tr.row-selected td{background:transparent!important}
  /* Mostrar acciones siempre en mobile (no hay hover) */
  tr .drag-handle{opacity:0}

  /* ── Tarjeta de producto (mobile) ────────── */
  .mpc{
    background:var(--surface);border:1px solid var(--border);
    border-radius:12px;overflow:hidden;
    transition:border-color .18s,box-shadow .18s,transform .12s;
    box-shadow:0 1px 4px rgba(28,24,23,.06);
  }
  .mpc.mpc-oos{
    opacity:.75;
    box-shadow:0 1px 3px rgba(28,24,23,.04);
  }
  /* Feedback táctil al presionar la card */
  .mpc-top:active{background:rgba(201,164,98,.04)}
  /* Top: imagen + info */
  .mpc-top{display:flex;gap:10px;padding:10px 12px 8px;align-items:flex-start}
  /* Imagen con checkbox overlay */
  .mpc-img-wrap{position:relative;flex-shrink:0;width:76px;height:76px}
  .mpc-img{width:76px;height:76px;object-fit:contain;border-radius:12px;border:1px solid var(--border-light);display:block;background:#fff;}
  .mpc-check-over{
    -webkit-appearance:none;appearance:none;
    position:absolute;top:4px;left:4px;
    width:22px;height:22px;
    border:2.5px solid rgba(255,255,255,.9);border-radius:50%;
    background:rgba(0,0,0,.28) center/60% no-repeat;
    box-shadow:0 1px 5px rgba(0,0,0,.3);
    cursor:pointer;opacity:0;
    transition:opacity .15s,background .12s,transform .1s;
  }
  .selection-active .mpc-check-over{opacity:1}
  .mpc-check-over:checked{
    background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='white' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/58% no-repeat;
    border-color:var(--gold);transform:scale(1.1);
  }
  tr.row-selected .mpc-img{filter:brightness(.82)}
  /* Info */
  .mpc-info{flex:1;min-width:0;padding-top:0;display:flex;flex-direction:column;gap:4px;}
  .mpc-name{font-weight:700;font-size:.88rem;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--charcoal);letter-spacing:-.01em}
  /* Categoría: ● dot  [Label chip]  [BADGE] — badge siempre separado */
  .mpc-cat-tag{display:flex;align-items:center;gap:5px;font-size:.69rem;color:var(--muted);margin:0;flex-wrap:wrap}
  .mpc-cat-tag .cat-label-inline{
    background:var(--cream);
    border:1px solid var(--border-light)!important;
    border-bottom:1px solid var(--border-light)!important;
    padding:5px 9px;border-radius:50px;
    color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;
  }
  .mpc-cat-tag .cat-label-inline:hover{
    background:var(--surface-soft);border-color:var(--gold)!important;color:var(--gold-dark);
  }
  .mpc-price-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:6px;border-top:1px solid var(--border-light)}
  .mpc-price{font-size:1.15rem;font-weight:700;font-family:'Playfair Display',serif;line-height:1;color:var(--charcoal)}
  .mpc-price-orig{font-size:.74rem;color:var(--muted-light);text-decoration:line-through;font-family:'Inter',sans-serif}
  .mpc-stock-inline{margin-left:0}
  /* ⭐ Estrella — top-right, cancela bottom del breakpoint 1024px */
  .mpc-star{
    position:absolute;top:5px;right:5px;bottom:auto;
    background:transparent;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));border:none;border-radius:8px;
    padding:3px 5px;font-size:.8rem;cursor:pointer;line-height:1;
    transition:.15s;
    touch-action:manipulation;
  }
  .mpc-star.feat-active{background:#FFF8E7;color:#C9A462;box-shadow:0 1px 5px rgba(0,0,0,.14);filter:none}

  /* Vista tarjetas en mobile: 2 columnas compactas */
  .admin-cards-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;padding:8px}
  .ac-img-wrap{aspect-ratio:4/3}
  .ac-body{padding:7px 9px 9px;gap:3px}
  .ac-name{font-size:.78rem;margin-bottom:3px;-webkit-line-clamp:2}
  /* Categoría: ya es un filtro arriba (chips), no necesita repetirse por
     tarjeta -- mismo patrón que Shopify Admin/ZARA/Amazon en vista compacta
     de grid. Se oculta aquí para bajar la altura de la tarjeta; sigue
     visible y editable desde el Quick View (tap en la imagen). */
  .ac-meta{display:none}
  .ac-price{font-size:.9rem}
  .ac-footer{margin-top:6px;padding-top:6px}
  .ac-img-wrap{overflow:hidden;border-radius:12px}
  .ac-img{border-radius:0;display:block}
  .ac-body{margin-top:0}
  /* Estrella arriba-derecha — visible sobre imagen */
  .ac-star{bottom:auto;top:8px;right:10px}
  /* En mobile la tabla pasa a block cuando está visible */
  #products-table-el{display:block}
  #products-table-el table{display:block}

  /* View toggle: solo íconos, sin texto */
  #vbtn-list::after{content:none}
  #vbtn-cards::after{content:none}
  .view-toggle{border-radius:10px}
  /* 44px real (no hit-slop) -- los dos botones están a solo 2px de
     distancia, agrandar solo el área de toque los haría traslaparse. Hay
     espacio de sobra en esta fila desde que se quitó la fila de píldoras. */
  .view-btn{width:44px;height:44px;font-size:1.15rem;padding:0}

  /* Formulario → bottom sheet */
  .overlay{align-items:flex-end;padding:0}
  .modal{max-width:100%!important;max-height:92vh;border-radius:20px 20px 0 0;margin:0}
  .overlay.open .modal{transform:scale(1) translateY(0)}
  .form-row{grid-template-columns:1fr;gap:0}
  /* Footer sticky: siempre visible sin scroll, una sola fila para no robar altura al body */
  .modal-foot{
    position:sticky;bottom:0;z-index:10;
    gap:10px;
    border-radius:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:var(--surface);
  }
  .modal-foot .btn{flex:1;justify-content:center;padding:13px}

  /* Zona de imagen: ícono como placeholder, ocultar texto drag */
  .img-upload-zone .up-text{display:none}
  .img-upload-zone .up-icon{display:block;font-size:2rem;margin-bottom:8px;opacity:.35}
  .img-upload-zone{padding:20px 8px 12px;border-style:dashed;background:var(--surface-soft)}
  .img-upload-zone.has-image .up-icon{display:none}
  .img-upload-zone.has-image .up-text{display:none}
  .img-upload-zone.has-image{padding:8px;border-style:dashed}
  .img-btns .btn{flex:1;justify-content:center;min-height:44px}

  /* Ocultar campo "Etiqueta visible" — se llena automáticamente */

  /* Toggle más grande en mobile */
  .checkbox-row{gap:14px;padding:4px 0}
  .checkbox-row input[type=checkbox]{width:48px;height:28px;border-radius:14px}
  .checkbox-row input[type=checkbox]::after{width:22px;height:22px}
  .checkbox-row input[type=checkbox]:checked::after{transform:translateX(20px)}

  /* Search wrap: mantiene min-width para ocupar su propia fila */

  /* Modal de confirmación centrado */
  #del-overlay{align-items:center;padding:20px}
  #del-overlay .modal{border-radius:16px;max-width:calc(100% - 32px)}
}

/* Pantallas muy pequeñas (<380px) */
@media(max-width:380px){
  .admin-cards-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
  .inv-tabs{gap:16px}
  .bulk-bar .btn{font-size:.68rem;padding:5px 8px}
  main{padding:14px 10px}
  /* íconos con label en teléfonos muy chicos */
}

/* ── TABLETA (641px–1024px) ─────────────────────────────────────────────
   Portrait: ~641-900px  |  Landscape: ~900-1024px                      */
/* Tableta portrait (641–768px): search en fila propia, botones con scroll */
@media(min-width:641px) and (max-width:768px){
  .toolbar > .btn-gold,.tb-search-row .btn-gold{display:none}
  .toolbar{flex-wrap:wrap;gap:8px;padding:12px 12px;border-radius:var(--r)}
  .tb-search-row{flex-wrap:wrap}
  .search-scan-row{order:-1;flex:0 0 100%}
  .search-scan-btn{display:flex}
  /* FAB en vez de fila de píldoras -- este rango ya ocultaba Agregar/Kit de
     texto arriba (líneas 1328-1329) pero antes de este cambio no mostraba
     ningún FAB tampoco: hueco real donde no había forma de agregar un
     producto en 641-768px. Corregido de paso. */
  .fab-add{display:flex;align-items:center;justify-content:center;bottom:calc(24px + env(safe-area-inset-bottom))}
  .tb-actions-wrap{display:none}
  .tb-filter-row #creator-filter-wrap{display:none!important}
  .tb-filter-row #cat-filter-btn{flex:1;max-width:none}
  .tb-filter-row #sort-filter-btn{flex:1;max-width:none}
}

@media(min-width:641px) and (max-width:1024px){
  body{overflow-x:hidden}
  main{padding:14px 18px}

  main{padding-bottom:calc(80px + 14px)}

  /* ── Toolbar: selects flex:1 para llenar ambas filas sin espacio vacío ── */
  .toolbar{padding:10px 14px;gap:8px;margin-bottom:12px}
  .inv-tabs-row{width:calc(100% + 28px);margin:-10px -14px 4px;padding:0 14px}
  .toolbar .tb-filter-row #creator-filter-wrap{flex:none;min-width:170px;max-width:200px}
  .toolbar .tb-filter-row #cat-filter-btn,.toolbar .tb-filter-row #sort-filter-btn{min-width:0}
  #cat-filter{flex:1;min-width:110px}
  #sort-filter-btn{flex:1;min-width:100px}

  /* ── Cards grid ── */
  .admin-cards-grid{grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:12px;padding:14px}

  /* ── Topbar: solo nav de íconos ── */
  .topbar{padding:0 16px;background:var(--ink)}
  .topbar-right .btn-gold{display:none}
  .topbar-nav-mobile{gap:1px}
}

/* Desde donde Agregar/Kit vuelven a ser botones de texto (no FAB): Captura
   se muestra junto a ellos, no en la fila de Escanear/Recibir/Importar */
@media(min-width:769px){
  #btn-capture-mode-mobile{display:none!important}
}

/* Desktop (>1024px) — nav unificada de íconos, igual que mobile */
@media(min-width:1025px){
  .topbar{background:var(--ink)}
  .topbar-right .btn-gold{display:none}
  /* Toolbar en desktop: búsqueda arriba, filtros abajo */
  .toolbar{flex-direction:column;gap:8px;padding:14px 18px}
  .tb-search-row{width:100%}
  .tb-filter-row{width:100%;gap:8px}
  .tb-filter-row #cat-filter-btn{flex:1;min-width:140px;max-width:220px}
  .tb-filter-row #sort-filter-btn{flex:1;min-width:120px;max-width:240px}
  .tb-filter-row #creator-filter-wrap{flex:none;min-width:170px;max-width:220px}
  .inv-tabs-row{width:calc(100% + 36px);margin:-14px -18px 4px;padding:0 18px}
  .filter-active-bar{padding:0 0 2px}
}

/* ── DISPOSITIVOS SIN HOVER (táctiles: tablets, teléfonos) ────────────
   Las acciones están ocultas hasta hover, pero en touch no hay hover.
   Las mostramos siempre en dispositivos que no soportan hover.        */
@media(hover:none){
  .drag-handle    {display:none!important}  /* drag & drop no funciona en touch */
  /* Prevenir zoom de iOS en inputs — aplica a todos los tamaños de pantalla táctil */
  input,select,textarea{font-size:16px!important;-webkit-appearance:none}
}

/* ══ TOPBAR NAV — ver shared.css ════════════════════════════════════ */

/* ── PANTALLAS GRANDES (iMac, monitores wide) ─────────────────────── */
@media(min-width:1280px){
  main{max-width:1440px;padding:24px 40px}
  .admin-cards-grid{grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:14px}
  .ac-img{aspect-ratio:4/3}
  .ac-body{padding:10px 12px}
  .ac-name{font-size:.8rem;-webkit-line-clamp:3}
  .ac-price{font-size:.88rem}
  /* Estrella arriba-derecha para que el overlay inferior no la tape */
  .ac-star{bottom:auto;top:8px;right:10px}
  .ac-img-wrap{position:relative}
}
@media(min-width:1600px){
  main{max-width:1800px;padding:24px 56px}
  .admin-cards-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .ac-img{aspect-ratio:4/3}
  .ac-body{padding:9px 11px}
}

/* ══ MODO RECEPCIÓN ══════════════════════════════════════════════════ */
.recv-overlay{position:fixed;inset:0;z-index:400;background:var(--surface);display:flex;flex-direction:column;overflow:hidden}
/* .recv-panel envuelve header+body+footer dentro de #recv-ia-overlay y
   #recv-overlay (2026-09-11 -- antes solo el primero) — en mobile es
   transparente (llena la pantalla completa, igual que antes); en desktop se
   convierte en una tarjeta centrada de tamaño fijo en vez de dejar el
   contenido angosto flotando solo en medio de un monitor ancho — mismo
   patrón ya usado en Quick View/Kit Builder (2026-06-12). Cada overlay tiene
   su propio max-width/alto (ver abajo) porque "Recibir mercancía" es una
   herramienta más ligera que Recepción con IA -- no necesita tanto ancho. */
.recv-panel{display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;background:var(--surface)}
@media(min-width:901px){
  #recv-ia-overlay,#recv-overlay{align-items:center;justify-content:center;background:rgba(20,16,14,.55);padding:24px}
  /* 1400px, no 960px — el paso 2 (revisión) ya tiene su propio grid de
     2-3 columnas para monitores anchos (≥1000px/≥1500px, ver .ria-items-list
     más abajo); un panel más angosto lo hubiera apretado sin necesidad. El
     paso 1/3 (angostos, max-width:420px por dentro) igual se ven bien
     enmarcados por la tarjeta con sombra — no hace falta que el panel sea
     angosto para que dejen de verse "flotando" en la pantalla. */
  #recv-ia-overlay .recv-panel{max-width:1400px;height:min(85vh,860px);border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
  /* "Recibir mercancía" -- 1100px basta para 2 columnas de tarjetas cómodas
     (ver #recv-list más abajo, grid a partir de 1000px de viewport). */
  #recv-overlay .recv-panel{max-width:1100px;height:min(82vh,780px);border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
}
.recv-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--ink);color:#fff;flex-shrink:0}
.recv-title{font-weight:700;font-size:.95rem;display:flex;align-items:center;gap:8px;color:#fff}
.recv-count-badge{font-size:.72rem;opacity:.6;font-weight:400}
/* El botón se ve compacto pero el área que de verdad responde al toque es
   ~44px -- mismo truco de hit-slop ya usado en .hi-del (Historial de Caja):
   un ::after invisible que se extiende más allá del borde visible, sin
   ocupar ese espacio en el layout del header. */
.recv-close{background:rgba(255,255,255,.15);border:none;color:#fff;border-radius:8px;padding:6px 14px;font-size:.8rem;font-weight:600;cursor:pointer;font-family:inherit;touch-action:manipulation;position:relative}
.recv-close::after{content:'';position:absolute;inset:-9px}
.recv-body{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}
.recv-scan-zone{padding:12px 14px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--surface-soft)}
.recv-search-row{display:flex;gap:8px}
.recv-search{flex:1;min-width:0;padding:13px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:.88rem;font-family:inherit;outline:none;background:var(--surface)}
.recv-search:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,164,98,.1)}
.recv-scan-btn{background:var(--gold);color:#fff;border:none;border-radius:10px;padding:13px 14px;font-size:.85rem;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;touch-action:manipulation;flex-shrink:0}
/* 200px→420px (2026-09-11) -- la tarjeta "no encontrado" ahora trae un
   buscador por nombre embebido + sus resultados (ver recvSearchInNotFound,
   admin-recv.js); a 200px quedaba apretada con scroll interno innecesario.
   Sigue con overflow-y:auto -- una lista larga de coincidencias normales
   también se beneficia del respiro extra antes de necesitar scroll. */
.recv-search-results{margin-top:8px;max-height:420px;overflow-y:auto;border:1.5px solid var(--border);border-radius:10px;background:var(--surface);display:none}
.recv-result-item{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:.15s;touch-action:manipulation}
.recv-result-item:last-child{border-bottom:none}
.recv-result-item:active{background:var(--gold-light)}
.recv-result-img{width:36px;height:36px;object-fit:cover;border-radius:6px;flex-shrink:0;background:var(--surface-soft)}
.recv-result-name{font-size:.84rem;font-weight:600;flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.recv-result-stock{font-size:.7rem;color:var(--muted)}
.recv-result-add{font-size:.75rem;color:var(--gold);font-weight:700;flex-shrink:0}
/* Feedback card */
.recv-fb{position:absolute;top:8px;left:12px;right:12px;z-index:10;background:var(--surface);border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.16);border:2px solid var(--gold);padding:12px 14px;display:none;animation:recvFbIn .2s ease}
@keyframes recvFbIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.recv-fb-inner{display:flex;align-items:center;gap:10px}
.recv-fb-img{width:48px;height:48px;object-fit:cover;border-radius:9px;flex-shrink:0;background:var(--surface-soft)}
.recv-fb-info{flex:1;min-width:0}
.recv-fb-name{font-size:.86rem;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--charcoal)}
.recv-fb-arrow{font-size:.78rem;color:var(--muted);margin-top:2px}
.recv-fb-arrow strong{color:var(--green)}
.recv-fb-controls{display:flex;align-items:center;gap:6px;margin-top:8px}
.recv-fb-btn{width:32px;height:32px;border-radius:8px;border:1.5px solid var(--border);background:var(--surface);font-size:1.1rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;touch-action:manipulation;flex-shrink:0}
.recv-fb-btn:active{background:var(--gold);color:#fff;border-color:var(--gold)}
.recv-fb-qty{font-size:1.1rem;font-weight:700;min-width:32px;text-align:center;color:var(--charcoal)}
.recv-fb-ok{margin-left:auto;background:var(--ink);color:#fff;border:none;border-radius:9px;padding:7px 16px;font-size:.8rem;font-weight:700;cursor:pointer;font-family:inherit;touch-action:manipulation}
/* Lista */
.recv-list-wrap{flex:1;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column}
.recv-list-head{padding:10px 16px 8px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);background:var(--surface);position:sticky;top:0;border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;z-index:1}
/* .recv-item-card envuelve la fila (imagen/nombre/badge/deshacer) y, en modo
   "Con factura", la fila extra de campos debajo -- tarjeta propia con borde
   completo (2026-09-11, antes solo un borde inferior en una lista plana) para
   que funcione igual de bien apilada en mobile o en la cuadrícula de 2
   columnas de escritorio (ver #recv-list más abajo) sin depender de
   :last-child, que con un grid ya no identifica de forma confiable "la
   última tarjeta visual". */
/* min-width:0 (2026-09-11) -- mismo motivo que .ria-item-card en Recepción
   con IA: ahora que #recv-list también es grid en tablet/escritorio (ver
   más abajo), una tarjeta sin esto podría resistirse a encogerse por debajo
   del ancho mínimo de su contenido y desbordar la cuadrícula horizontalmente. */
.recv-item-card{border:1.5px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden;min-width:0}
.recv-item{display:flex;align-items:center;gap:10px;padding:10px 14px}
.recv-item-img{width:42px;height:42px;object-fit:cover;border-radius:8px;flex-shrink:0;background:var(--surface-soft)}
.recv-item-info{flex:1;min-width:0}
.recv-item-name{font-size:.83rem;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--charcoal)}
.recv-item-arrow{font-size:.71rem;color:var(--muted);margin-top:2px}
.recv-item-arrow strong{color:#10B981}
.recv-new-badge{font-size:.6rem;font-weight:700;color:var(--gold-dark);background:var(--gold-light);border-radius:50px;padding:1px 7px;margin-left:6px;vertical-align:1px;white-space:nowrap}
.recv-badge{background:#D1FAE5;color:#065F46;border-radius:50px;padding:3px 11px;font-size:.8rem;font-weight:700;white-space:nowrap;flex-shrink:0}
/* Mismo hit-slop que .recv-close/.hi-del -- se ve compacto (para no inflar
   la fila de 42px del thumbnail) pero el área de toque real es ~44px. */
.recv-undo-btn{background:none;border:1.5px solid var(--border);border-radius:8px;padding:5px 10px;font-size:.72rem;color:var(--muted);cursor:pointer;font-family:inherit;touch-action:manipulation;flex-shrink:0;white-space:nowrap;position:relative}
.recv-undo-btn::after{content:'';position:absolute;inset:-9px}
.recv-undo-btn:active{background:#FFF5F5;border-color:#FECACA;color:#E85D5D}
.recv-undo-btn.recv-archive-btn:active{background:var(--gold-light);border-color:var(--gold);color:var(--gold-dark)}
/* Modo "Con factura" -- reutiliza el mismo grid de campos (.ria-item-fields/
   .ria-item-field) que ya usa Recepción con IA, para que ambas herramientas
   de recepción compartan el mismo lenguaje visual en vez de inventar uno
   paralelo solo para esta pantalla. */
.recv-item-extra{padding:0 14px 12px}
.recv-mode-toggle{margin-bottom:2px}
.recv-mode-hint{font-size:.72rem;color:var(--muted);margin:6px 2px 10px;line-height:1.4}
.recv-mode-hint strong{color:var(--charcoal)}
#recv-list{flex:1;display:flex;flex-direction:column;gap:8px;padding:10px 14px}
.recv-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;color:var(--muted-light);font-size:.84rem;grid-column:1/-1}
.recv-empty-icon{font-size:2rem;margin-bottom:8px}
/* Desktop -- el buscador (una sola cosa, no necesita más ancho) se queda
   angosto y centrado, igual que antes. La lista de recibidos, en cambio,
   pasó de esa misma jaula de 680px a usar el ancho completo del panel: a
   partir de 1000px de viewport se acomoda en 2 columnas (mismo criterio que
   .ria-items-list de Recepción con IA, misma pantalla hermana) — con "Con
   factura" activo cada tarjeta ya trae 3 campos más, una sola columna
   angosta hubiera significado mucho scroll para una sesión de varios
   productos. .recv-empty gana grid-column:1/-1 arriba para que el mensaje
   "Escanea o busca..." siga centrado en las 2 columnas, no encajonado en la
   mitad izquierda. */
@media(min-width:900px){
  .recv-scan-zone{max-width:680px;margin:0 auto;width:100%}
  .recv-fb{left:12px;right:12px;max-width:680px;margin:0 auto}
}
/* 901px, no 1000px (2026-09-11) -- coincide con el breakpoint de la tarjeta
   centrada de arriba: sin esto, tablets entre esos dos anchos (ej. Galaxy
   Tab, ~912px) ya se veían como tarjeta flotante pero con una sola columna
   de tarjetas estiradas a todo lo ancho, desperdiciando el espacio que la
   propia tarjeta centrada ya prometía. A 901px el panel mide ~825px de
   contenido útil — ~407px por columna, cómodo incluso para las tarjetas más
   simples de esta pantalla. */
@media(min-width:901px){
  #recv-list{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:10px}
}
/* Footer */
.recv-footer{padding:12px 14px;padding-bottom:max(20px, env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--surface);flex-shrink:0;display:flex;gap:8px;align-items:stretch}
.recv-btn-wa{background:#25D366;color:#fff;border:none;border-radius:50%;width:48px;height:48px;cursor:pointer;touch-action:manipulation;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.recv-btn-finish{flex:1;background:var(--gold);color:#fff;border:none;border-radius:12px;padding:14px;font-size:.9rem;font-weight:700;cursor:pointer;font-family:inherit;touch-action:manipulation;min-height:48px}

/* ══ RECEPCIÓN CON IA ════════════════════════════════════════════════ */
.ria-upload-step{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:18px}
#ria-undo-banner:empty{display:none}
.ria-undo-card{width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:12px;background:var(--gold-light);border:1.5px solid var(--gold);font-size:.82rem;color:var(--gold-dark);font-weight:600}
.ria-undo-btn{align-self:flex-start;padding:9px 14px;border-radius:9px;border:1.5px solid var(--gold-dark);background:var(--surface);color:var(--gold-dark);font-weight:700;font-size:.82rem;cursor:pointer;font-family:inherit;touch-action:manipulation}
.ria-undo-btn:hover{background:var(--gold-dark);color:#fff}
#ria-result-undo:empty{display:none}
.ria-mode-toggle{display:flex;gap:8px;width:100%;max-width:420px;background:var(--surface-soft);border:1.5px solid var(--border);border-radius:12px;padding:4px}
.ria-mode-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:13px 8px;border-radius:9px;border:none;background:none;color:var(--muted);font-weight:600;font-size:.76rem;cursor:pointer;font-family:inherit;touch-action:manipulation;text-align:center}
.ria-mode-btn svg{flex-shrink:0}
.ria-mode-btn.active{background:var(--surface);color:var(--charcoal);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.ria-source-row{display:flex;gap:12px;width:100%;max-width:420px}
.ria-source-btn{flex:1;border:2px dashed var(--border);border-radius:16px;padding:26px 14px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:.18s;background:var(--surface-soft);text-align:center;font-family:inherit;touch-action:manipulation}
.ria-source-btn:hover{border-color:var(--gold);background:var(--gold-light)}
.ria-source-title{font-weight:700;font-size:.88rem;color:var(--charcoal);margin-top:4px}
.ria-source-sub{font-size:.72rem;color:var(--muted);max-width:150px}
.ria-upload-hint{font-size:.76rem;color:var(--muted);text-align:center;max-width:320px}
.ria-upload-hint a{color:var(--gold-dark);font-weight:600;text-decoration:none}
.ria-upload-hint a:hover{text-decoration:underline}
.ria-photo-stage{flex:1;display:flex;flex-direction:column;padding:16px;gap:12px;overflow-y:auto}
.ria-photo-stage-head{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.ria-photo-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px}
.ria-photo-thumb{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:3/4;background:var(--surface-soft)}
.ria-photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ria-photo-thumb button{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.55);color:#fff;border:none;border-radius:50%;width:22px;height:22px;font-size:.75rem;cursor:pointer;touch-action:manipulation}
.ria-photo-num{position:absolute;bottom:4px;left:6px;background:rgba(0,0,0,.55);color:#fff;font-size:.68rem;font-weight:700;padding:1px 7px;border-radius:50px}
.ria-photo-add-btn{border:1.5px dashed var(--border);border-radius:10px;padding:12px;background:none;color:var(--gold-dark);font-weight:600;font-size:.84rem;cursor:pointer;font-family:inherit;touch-action:manipulation}
.ria-photo-add-btn:hover{border-color:var(--gold);background:var(--gold-light)}
.ria-photo-extract-btn{margin-top:auto;background:var(--gold);color:#fff;border:none;border-radius:12px;padding:14px;font-size:.9rem;font-weight:700;cursor:pointer;font-family:inherit;touch-action:manipulation}
.ria-status{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--muted);font-size:.86rem;padding:24px}
.ria-status-spin{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite}
.ria-review-step{flex:1;display:flex;flex-direction:column;overflow:hidden}
.ria-review-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.ria-review-head span:first-child{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.ria-review-restart{background:none;border:1.5px solid var(--border);border-radius:8px;padding:6px 12px;font-size:.76rem;color:var(--muted);cursor:pointer;font-family:inherit;touch-action:manipulation}
.ria-review-restart:hover{border-color:var(--charcoal);color:var(--charcoal)}
.ria-review-summary{margin:0 14px 4px;padding:9px 12px;border-radius:10px;font-size:.78rem;display:flex;flex-direction:column;gap:2px;flex-shrink:0}
.ria-review-summary.ria-sum-ok{background:#ECFDF5;color:#065F46}
.ria-review-summary.ria-sum-warn{background:#FEF3C7;color:#92400E}
.ria-review-summary strong{font-weight:700}
.ria-items-list{flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:10px}
@media(min-width:1000px){.ria-items-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}}
@media(min-width:1500px){.ria-items-list{grid-template-columns:1fr 1fr 1fr}}

/* Vincular producto — match del pedido con el catálogo */
.ria-match-row{margin-top:2px;margin-bottom:10px;display:flex;flex-direction:column;gap:6px}
.ria-match-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:50px;font-size:.78rem;font-weight:600;cursor:pointer;border:1.5px solid transparent;touch-action:manipulation;max-width:100%}
.ria-match-chip span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ria-match-linked{background:#ECFDF5;color:#065F46;border-color:#A7F3D0}
.ria-match-newchip{background:#FFF8EE;color:var(--gold-dark);border-color:var(--gold)}
.ria-match-chip-row{display:flex;align-items:center;gap:8px}
.ria-match-chip-row .ria-match-chip{flex:1;min-width:0}
.ria-scan-icon-btn{flex-shrink:0;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;padding:0}
.ria-scan-icon-btn:hover{border-color:var(--gold);background:var(--gold-light);color:var(--gold-dark)}
.ria-mpc{padding:10px 16px;font-size:.78rem;font-weight:600;color:var(--charcoal);border-bottom:1px solid var(--border)}
.ria-mpc:empty{display:none}
.ria-mpc-code{font-weight:400;color:var(--muted-light)}
.ria-match-candidates{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ria-match-cand-label{flex-basis:100%;font-size:.7rem;color:var(--muted-light);font-weight:600}
.ria-match-cand-btn{background:var(--surface);border:1.5px solid var(--border);border-radius:50px;padding:5px 11px;font-size:.74rem;color:var(--charcoal);cursor:pointer;font-family:inherit;touch-action:manipulation}
.ria-match-cand-btn:hover{border-color:var(--gold);background:var(--gold-light)}
.ria-sugg-hint{font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted-light)}
#ria-img-preview{position:fixed;width:150px;height:150px;object-fit:contain;background:var(--surface);border:2px solid var(--gold);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:2000;display:none;pointer-events:none}
@media(hover:none){#ria-img-preview{display:none!important}}

/* Overlay de vinculación — mismo patrón que #bulk-cat-overlay */
#ria-match-overlay{position:fixed;inset:0;z-index:450;background:rgba(0,0,0,.45);display:none;align-items:flex-end;justify-content:center}
#ria-match-sheet{background:var(--surface);border-radius:20px 20px 0 0;width:100%;max-width:600px;max-height:82dvh;display:flex;flex-direction:column}
.ria-match-new-btn{margin:0 16px 16px;padding:12px;border-radius:10px;border:1.5px dashed var(--border);background:none;color:var(--gold-dark);font-weight:600;font-size:.84rem;cursor:pointer;font-family:inherit;touch-action:manipulation;flex-shrink:0}
.ria-match-new-btn:hover{border-color:var(--gold);background:var(--gold-light)}
.ria-match-scan-btn{margin:0 16px 10px;padding:13px;border-radius:10px;border:1.5px solid var(--border);background:var(--surface);color:var(--charcoal);font-weight:600;font-size:.82rem;cursor:pointer;font-family:inherit;touch-action:manipulation;flex-shrink:0}
.ria-match-scan-btn:hover{border-color:var(--gold);background:var(--gold-light)}
.ria-match-result-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer;touch-action:manipulation}
.ria-match-result-item:hover{background:var(--gold-light)}
.ria-match-result-item img{width:32px;height:32px;object-fit:cover;border-radius:6px;flex-shrink:0;background:var(--surface-soft)}
.ria-match-result-name{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.84rem;font-weight:600;color:var(--charcoal)}
.ria-match-result-price{font-size:.74rem;color:var(--muted);flex-shrink:0}

/* Aplicar / modo prueba */
.ria-review-footer{flex-direction:column;gap:8px}
.ria-dry-badge{display:none;text-align:center;font-size:.72rem;font-weight:700;color:#92400E;background:#FEF3C7;border-radius:50px;padding:5px 12px}
.ria-dry-badge.show{display:block}
.ria-apply-btn{width:100%;background:var(--gold);color:#fff;border:none;border-radius:12px;padding:14px;font-size:.9rem;font-weight:700;cursor:pointer;font-family:inherit;touch-action:manipulation;min-height:48px}
.ria-apply-btn:disabled{opacity:.6;cursor:default}

/* Paso 3 — resultado */
.ria-result-step{flex:1;display:flex;flex-direction:column;padding:18px;gap:14px;overflow-y:auto}
.ria-result-banner{border-radius:12px;padding:12px 14px;font-size:.85rem;font-weight:600}
.ria-result-banner.ria-dry{background:#FEF3C7;color:#92400E}
.ria-result-banner.ria-real{background:#ECFDF5;color:#065F46}
.ria-result-group-label{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:6px 0 2px}
.ria-result-row{font-size:.82rem;padding:7px 0;border-bottom:1px solid var(--border)}
.ria-result-row strong{color:var(--charcoal)}
.ria-result-row .ria-result-diff{color:var(--muted);font-size:.76rem;display:block;margin-top:2px}
.ria-result-row.ria-result-fail{color:var(--red)}
.ria-result-close-btn{margin-top:auto;padding:12px;border-radius:10px;border:1.5px solid var(--border);background:var(--surface);color:var(--charcoal);font-weight:600;font-size:.85rem;cursor:pointer;font-family:inherit;touch-action:manipulation}
/* min-width:0 en .ria-item-card (2026-09-11) -- sin esto, como grid item
   dentro de .ria-items-list (≥1000px, ver más abajo) el navegador nunca deja
   que la tarjeta se encoja por debajo del ancho mínimo de su contenido
   (textarea del nombre, inputs de Cantidad/Costo), así que en vez de
   ajustarse a las columnas del grid, toda la lista se desbordaba horizontal
   -- confirmado en captura real de escritorio con la cuadrícula de 3
   columnas. Mismo motivo por el que .ria-match-chip-row .ria-match-chip ya
   tenía min-width:0 desde antes; faltaba aplicarlo un nivel arriba, en la
   tarjeta completa (y en .ria-item-field, ver abajo, por el mismo problema
   con los inputs numéricos). */
.ria-item-card{border:1.5px solid var(--border);border-radius:12px;padding:12px;background:var(--surface);min-width:0}
.ria-item-top{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px}
.ria-item-name{flex:1;min-width:0;font-size:.86rem;font-weight:600;font-family:inherit;border:1.5px solid var(--border);border-radius:8px;padding:8px 10px;outline:none;background:var(--surface-soft);resize:none;overflow:hidden;line-height:1.3;min-height:1.3em}
.ria-item-name:focus{border-color:var(--gold);background:var(--surface)}
.ria-item-code{font-size:.68rem;color:var(--muted-light);white-space:nowrap;padding:4px 0}
.ria-item-remove{background:none;border:none;color:var(--muted-light);cursor:pointer;font-size:1rem;padding:2px 6px;flex-shrink:0;touch-action:manipulation}
.ria-item-remove:hover{color:var(--red)}
.ria-item-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
@media(max-width:420px){
  .ria-item-fields{grid-template-columns:1fr 1fr}
  .ria-item-fields .ria-item-field:last-child{grid-column:1 / -1}
  .ria-item-fields.ria-costonly-fields .ria-item-field:last-child{grid-column:auto}
}
.ria-item-field{min-width:0}
.ria-item-field label{font-size:.66rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;display:block;margin-bottom:3px}
.ria-item-field input{width:100%;padding:8px 9px;border:1.5px solid var(--border);border-radius:8px;font-size:.84rem;font-family:inherit;outline:none;background:var(--surface)}
.ria-item-field input:focus{border-color:var(--gold)}
.ria-item-field.ria-cost input{border-color:#FCD34D;background:var(--tint-amber-bg)}
.ria-item-field.ria-cat{grid-column:1 / -1}
.ria-item-field select{width:100%;padding:8px 9px;border:1.5px solid var(--border);border-radius:8px;font-size:.84rem;font-family:inherit;outline:none;background:var(--surface);color:var(--charcoal)}
.ria-item-field select:focus{border-color:var(--gold)}
.ria-item-warn{margin-top:8px;font-size:.72rem;color:#92400E;background:#FEF3C7;border-radius:7px;padding:5px 9px;display:none}
.ria-item-warn.ria-item-omit{margin-top:6px;color:var(--muted);background:var(--surface-soft);border:1px dashed var(--border)}
.ria-item-fields.ria-costonly-fields{grid-template-columns:1fr 1fr}
.ria-kits-section{border-top:1px solid var(--border);flex-shrink:0;max-height:38%;overflow-y:auto;background:var(--surface-soft)}
.ria-kits-head{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;font-size:.74rem;font-weight:700;color:#92400E;padding:10px 16px;background:none;border:none;cursor:pointer;font-family:inherit;text-align:left;touch-action:manipulation}
.ria-kits-head span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ria-kits-head:hover{background:rgba(146,64,14,.06)}
/* Sin componentes pendientes -- deja de verse como una alerta cuando ya no
   hay nada de qué alertar (el ícono usa stroke="currentColor", así que
   cambia junto con el texto). */
.ria-kits-head.ria-kits-ok{color:var(--muted)}
.ria-kits-head.ria-kits-ok:hover{background:var(--surface)}
#ria-kits-toggle-ico{flex-shrink:0;font-size:.8rem}
.ria-kit-item{padding:6px 16px 10px;font-size:.8rem}
.ria-kit-item+.ria-kit-item{border-top:1px dashed var(--border);padding-top:10px}
.ria-kit-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.ria-kit-name{font-weight:600;color:var(--charcoal)}
.ria-kit-comp-list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.ria-kit-comp-row{display:flex;flex-direction:column;gap:5px}
.ria-kit-comp-name{font-size:.76rem;color:var(--muted);line-height:1.3}
.ria-kit-comp-row .ria-match-chip-row{gap:6px}
.ria-kit-comp-row .ria-scan-icon-btn{width:26px;height:26px}
.ria-kit-comp-cost{width:76px;flex-shrink:0;padding:6px 8px;border:1.5px solid #FCD34D;background:var(--tint-amber-bg);border-radius:8px;font-size:.8rem;font-family:inherit;outline:none;color:var(--charcoal)}
.ria-kit-comp-cost:focus{border-color:var(--gold)}
.ria-review-footer{padding:10px 16px;padding-bottom:max(14px, env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--cream);color:var(--muted);font-size:.76rem;text-align:center;flex-shrink:0}

/* ══ MODO CAPTURA ════════════════════════════════════════════════════ */
.cap-overlay{position:fixed;inset:0;background:rgba(20,15,12,.6);backdrop-filter:blur(4px);z-index:300;display:flex;align-items:center;justify-content:center;padding:16px}
.cap-modal{background:var(--surface);border-radius:20px;width:100%;max-width:420px;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden;max-height:90dvh}
.cap-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border)}
.cap-title{font-family:'Playfair Display',serif;font-size:1rem;color:var(--charcoal)}
.cap-counter{font-size:.75rem;color:var(--green);font-weight:700;background:#D1FAE5;padding:2px 10px;border-radius:50px;display:none}
.cap-close{background:none;border:none;font-size:1.2rem;color:var(--muted);cursor:pointer;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.15s}
.cap-close:hover{background:var(--cream)}
.cap-body{padding:16px 20px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:14px}
.cap-photo-area{
  border:2px dashed var(--border);border-radius:14px;
  min-height:180px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;
  cursor:pointer;transition:.18s;position:relative;overflow:hidden;
  background:var(--surface-soft);
}
.cap-photo-area:hover{border-color:var(--gold);background:var(--gold-light)}
.cap-photo-area.has-photo{border-style:solid;border-color:var(--border)}
.cap-photo-ph{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);font-size:.82rem}
.cap-photo-ph span:first-child{font-size:2.2rem}
.cap-preview{width:100%;height:100%;object-fit:contain;position:absolute;inset:0;border-radius:12px}
.cap-retake{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.25);border-radius:50px;padding:4px 12px;font-size:.72rem;font-weight:600;color:#fff;cursor:pointer;transition:.15s}
.cap-retake:hover{border-color:var(--gold);color:var(--gold-dark)}
.cap-ai-status{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted);background:var(--surface-soft);border-radius:10px;padding:10px 14px}
.cap-ai-spin{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0}
.cap-fields{display:flex;flex-direction:column;gap:10px}
.cap-field label{font-size:.72rem;font-weight:700;color:var(--muted);display:block;margin-bottom:4px;letter-spacing:.02em;text-transform:uppercase}
.cap-field input,.cap-field select{
  width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:10px;
  font-size:.92rem;font-family:inherit;outline:none;transition:border-color .15s;background:var(--surface);
}
.cap-field input:focus,.cap-field select:focus{border-color:var(--gold)}
.cap-field input.ai-filled,.cap-field select.ai-filled{animation:aiPulse .6s ease}
.cap-field input.cap-err{border-color:var(--red)!important;animation:capShake .3s ease}
.cap-require-hint{font-size:.8rem;color:var(--muted);margin-top:6px;text-align:center;min-height:1em}
@keyframes capShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.cap-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cap-footer{padding:14px 20px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.cap-footer-btns{display:flex;gap:10px}
.cap-btn-skip{flex:1;padding:11px;border-radius:50px;border:1.5px solid var(--border);background:var(--surface);font-size:.82rem;font-weight:600;color:var(--muted);cursor:pointer;transition:.15s;font-family:inherit}
.cap-btn-skip:hover{border-color:var(--charcoal);color:var(--charcoal)}
.cap-btn-save{flex:2;padding:11px;border-radius:50px;border:none;background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#fff;font-size:.88rem;font-weight:700;cursor:pointer;transition:.15s;font-family:inherit}
.cap-btn-save:disabled{background:var(--border);color:var(--muted);cursor:not-allowed}
.cap-btn-save:not(:disabled):hover{opacity:.9;transform:translateY(-1px)}
@keyframes aiPulse{0%{box-shadow:0 0 0 0 rgba(201,164,98,.5)}70%{box-shadow:0 0 0 8px rgba(201,164,98,0)}100%{box-shadow:0 0 0 0 rgba(201,164,98,0)}}
@media(max-width:480px){
  .cap-overlay{padding:0;align-items:flex-end}
  .cap-modal{border-radius:20px 20px 0 0;max-width:100%;max-height:95dvh}
}

.dup-signals-row{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.dup-signals-row .dup-signals{flex:1;margin-bottom:0}

/* ── COMPARE ZOOM (split fullscreen, reciclado por el zoom de duplicados) ── */
#cmp-zoom{position:fixed;inset:0;z-index:1600;background:#000;display:none;cursor:zoom-out}
#cmp-zoom.open{display:flex}
.cmp-zoom-half{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;min-width:0;position:relative}
.cmp-zoom-half:first-child{border-right:1px solid rgba(255,255,255,.12)}
.cmp-zoom-half img{max-width:100%;max-height:calc(100dvh - 80px);object-fit:contain;border-radius:8px;display:block}
@media(max-width:640px){
  #cmp-zoom.open{flex-direction:column}
  .cmp-zoom-half:first-child{border-right:none;border-bottom:1px solid rgba(255,255,255,.12)}
  .cmp-zoom-half img{max-height:calc(50dvh - 50px)}
}
#cmp-zoom-close{position:fixed;top:14px;right:16px;width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,.15);color:#fff;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);z-index:1601;transition:.15s}
#cmp-zoom-close:hover{background:rgba(255,255,255,.28)}
/* Insignia masiva — mismo bottom sheet que el selector de categoría */
#bulk-badge-overlay{position:fixed;inset:0;z-index:1300;background:rgba(0,0,0,.45);display:none;align-items:flex-end;justify-content:center}
#bulk-badge-overlay.open{display:flex}
#bulk-badge-sheet{background:var(--surface);border-radius:20px 20px 0 0;width:100%;max-width:600px;max-height:82dvh;display:flex;flex-direction:column}
.bbp-label{display:block;font-size:.78rem;font-weight:700;color:var(--muted);margin:4px 0 6px}
.bbp-input{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:.92rem;font-family:inherit;outline:none;box-sizing:border-box;background:var(--surface-soft);color:var(--charcoal);margin-bottom:14px}
.bbp-input:focus{border-color:var(--gold)}
#bbp-types .bcp-chip{min-height:44px}
.bbp-actions{display:flex;gap:10px;margin-top:20px}
.bbp-actions .btn{flex:1;min-height:44px;justify-content:center}
.bbp-actions .btn:disabled{opacity:.45;cursor:not-allowed}
.tag-internal{font-size:.68rem;background:var(--tint-amber-bg);color:var(--tint-amber-strong);padding:1px 6px;border-radius:4px;font-weight:600}
/* Botones +/− del armador de kits: 28px visibles, 44px táctiles */
.kb-qty-btn{position:relative}
.kb-qty-btn::after{content:'';position:absolute;inset:-8px -2px}
/* Ficha: Editar a todo lo ancho; Compartir · Ocultar · Más debajo; el resto
   se despliega en "Más acciones" */
.qv-actions .qv-btn-edit{grid-column:1/-1;padding:12px 6px;font-size:.86rem}
.qv-more{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding-top:7px;border-top:1px dashed var(--border)}
.qv-more[hidden]{display:none}
.qv-btn-more.active{border-color:var(--charcoal)}
/* Menú "Agregar" como lista desplegable en escritorio */
#add-menu-overlay.as-popover{background:transparent;align-items:flex-start;justify-content:flex-start}
#add-menu-overlay.as-popover #add-menu-sheet{position:fixed;width:260px;max-width:calc(100vw - 32px);border-radius:14px;padding:6px;box-shadow:0 12px 40px rgba(0,0,0,.18);border:1px solid var(--border)}
.bmo-item:focus-visible{outline:3px solid rgba(201,164,98,.55);outline-offset:-2px}
@media (hover:hover){.bmo-item:hover{background:var(--surface-soft)}}
.bmo-item.bmo-item-danger,.bmo-item.bmo-item-danger svg{color:var(--red)}
#f-cat-label-display.is-placeholder{color:var(--muted-light)}
/* Formulario: "Más detalles" plegado */
.form-more{margin-top:14px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
.form-more-summary{list-style:none;display:flex;flex-direction:column;gap:2px;padding:14px 44px 14px 16px;min-height:52px;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
.form-more-summary::-webkit-details-marker{display:none}
.form-more-summary::after{content:'';position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.form-more[open] > .form-more-summary::after{transform:translateY(-30%) rotate(-135deg)}
.form-more-summary > span:first-child{font-size:.9rem;font-weight:700;color:var(--charcoal)}
.form-more-hint{font-size:.8rem;color:var(--muted)}
.form-more-body{padding:4px 16px 16px;border-top:1px solid var(--border)}
.form-more-summary:focus-visible{outline:3px solid rgba(201,164,98,.55);outline-offset:2px;border-radius:var(--r)}
/* "Este producto es un kit": una regla general de inputs la dejaba en 0px (invisible) */
#f-is-kit{-webkit-appearance:checkbox;appearance:auto;width:20px;height:20px;min-width:20px;margin:0;flex-shrink:0;accent-color:var(--gold)}
label:has(> #f-is-kit){min-height:44px}

/* ══ PULIDO 2026-10-07 ═══════════════════════════════════════════════════ */
/* Hojas inferiores con el mismo encabezado (asa + título + ✕) que Ordenar y
   Categoría. Como popover en escritorio no se muestran. */
#add-menu-sheet .sheet-only,#pend-menu-sheet .sheet-only{margin:-8px -8px 6px}
#add-menu-overlay.as-popover .sheet-only,#pend-menu-overlay.as-popover .sheet-only{display:none}
#pend-menu-overlay:not(.as-popover) .popover-only{display:none}
/* Estrella de destacado: esquina de la tarjeta (lista en celular), sin
   encimarse a la foto. Gris suave; dorada si está destacado. */
.mpc-top{position:relative}
.mpc-top > .mpc-star{position:absolute;top:6px;right:6px;bottom:auto;width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:none;box-shadow:none;filter:none;color:var(--muted-light);cursor:pointer;touch-action:manipulation}
.mpc-top > .mpc-star::after{content:'';position:absolute;inset:-6px}
.mpc-top > .mpc-star.feat-active{background:none;box-shadow:none;color:var(--gold)}
.mpc-top .mpc-name{padding-right:28px}
/* Interruptores del formulario: ".field label" los volvía bloque y el texto
   quedaba más abajo que el switch. */
.field label.checkbox-row{display:flex;align-items:center;margin-bottom:0;font-size:.88rem;font-weight:500;color:var(--charcoal);letter-spacing:0}
/* Quick View "Más": las 6 acciones iguales en cuadrícula; Archivar (la
   recomendada) ya no se ve deshabilitada y Eliminar va en texto rojo, sin
   ocupar todo el ancho en rosa. */
.qv-more .qv-btn-archive{background:var(--surface-soft);color:var(--charcoal);border:1.5px solid var(--border)}
.qv-more .qv-btn-archive:hover{background:var(--surface-soft);border-color:var(--gold);color:var(--gold-dark)}
.qv-more .qv-btn-del{grid-column:auto;background:var(--surface-soft);color:var(--red);border:1.5px solid var(--border)}
.qv-more .qv-btn-del:hover{background:#fff3f3;border-color:rgba(232,93,93,.45);color:var(--red)}
/* Recibir mercancía: el botón de WhatsApp dice qué hace */
.recv-footer .recv-btn-wa{width:auto;padding:0 16px;gap:6px;border-radius:50px;font-family:inherit;font-size:.86rem;font-weight:700}