/* ============================================================================
   PRODUCTOS · pantalla única (PASO 4 de 4). Lista, acciones masivas y detalle.
   Prefijo pu-. Contrato visual: las 3 maquetas aprobadas (maquetas/productos/).
   ============================================================================ */
.pu { --pu-ink:#0f172a; --pu-sub:#64748b; --pu-faint:#94a3b8; --pu-line:#e6eaf1; --pu-bg:#f6f8fb;
      --pu-blue:#2563eb; --pu-blue-d:#1d4ed8; --pu-blue-l:#eff4ff; --pu-green:#16a34a; --pu-green-l:#ecfdf3;
      --pu-amber:#d97706; --pu-amber-l:#fff7e6; --pu-red:#dc2626; --pu-red-l:#fef2f2; --pu-violet:#7c3aed;
      font-family: Inter, system-ui, sans-serif; color: var(--pu-ink); font-size: 13px; }
.pu * { box-sizing: border-box; }
.pu-crumb { display:flex; align-items:center; gap:.45rem; font-size:12px; color:var(--pu-sub); margin:0 0 .9rem; }
.pu-crumb .pu-crumb-ico { width:22px; height:22px; border-radius:6px; background:var(--pu-blue); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:11px; }
.pu-crumb a { color:var(--pu-sub); text-decoration:none; cursor:pointer; }
.pu-crumb .on { color:var(--pu-blue); font-weight:600; }
.pu-crumb i.sep { font-size:9px; color:var(--pu-faint); }

.pu-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.pu-head-l { display:flex; align-items:center; gap:.9rem; }
.pu-head-ico { width:46px; height:46px; border-radius:50%; background:var(--pu-blue-l); color:var(--pu-blue); display:flex; align-items:center; justify-content:center; font-size:20px; }
.pu-head h1 { margin:0; font-size:22px; font-weight:800; letter-spacing:-.01em; }
.pu-head p { margin:.15rem 0 0; color:var(--pu-sub); font-size:13px; }
.pu-help { border:1px solid #c7d7fe; color:var(--pu-blue); background:#fff; border-radius:8px; padding:.45rem .8rem; font-weight:600; font-size:12px; cursor:pointer; display:inline-flex; gap:.4rem; align-items:center; }

/* Tarjetas contador */
.pu-cards { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:.6rem; margin-bottom:.9rem; }
.pu-card { background:#fff; border:1px solid var(--pu-line); border-radius:10px; padding:.7rem .75rem; text-align:left; cursor:pointer; font-family:inherit; display:grid; grid-template-columns:34px 1fr; column-gap:.55rem; align-items:center; transition:box-shadow .15s, border-color .15s; min-width:0; }
.pu-card:hover { box-shadow:0 6px 16px rgba(15,23,42,.08); }
.pu-card.on { border-color:var(--pu-blue); box-shadow:0 0 0 2px rgba(37,99,235,.18); }
.pu-card .ic { grid-row:1 / span 2; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; }
.pu-card .t { font-size:11px; font-weight:600; color:#334155; line-height:1.2; }
.pu-card .n { font-size:20px; font-weight:800; line-height:1.15; }
.pu-card .d { grid-column:1 / span 2; font-size:10.5px; color:var(--pu-faint); margin-top:.35rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ic-green { background:var(--pu-green-l); color:var(--pu-green); } .ic-amber { background:var(--pu-amber-l); color:var(--pu-amber); }
.ic-red { background:var(--pu-red-l); color:var(--pu-red); } .ic-violet { background:#f3efff; color:var(--pu-violet); }
.ic-slate { background:#f1f5f9; color:#475569; }

/* Panel de trabajo */
.pu-panel { background:#fff; border:1px solid var(--pu-line); border-radius:12px; }
.pu-tools { display:flex; gap:.6rem; align-items:center; padding:.8rem .9rem .3rem; }
.pu-search { flex:1; max-width:470px; position:relative; }
.pu-search i { position:absolute; left:.75rem; top:50%; transform:translateY(-50%); color:var(--pu-faint); font-size:12px; }
.pu-search input { width:100%; border:1px solid var(--pu-line); border-radius:8px; padding:.55rem .75rem .55rem 2rem; font-size:12.5px; font-family:inherit; color:var(--pu-ink); background:#fff; }
.pu-search input:focus { outline:none; border-color:var(--pu-blue); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.pu-sp { flex:1; }
.pu-btn { border:1px solid var(--pu-line); background:#fff; color:#334155; border-radius:8px; padding:.5rem .85rem; font-weight:600; font-size:12.5px; font-family:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap; }
.pu-btn:disabled { opacity:.55; cursor:not-allowed; }
.pu-btn-p { background:var(--pu-blue); border-color:var(--pu-blue); color:#fff; } .pu-btn-p:hover:not(:disabled) { background:var(--pu-blue-d); }
.pu-btn-o { border-color:var(--pu-blue); color:var(--pu-blue); } .pu-btn-o:hover:not(:disabled) { background:var(--pu-blue-l); }
.pu-btn-d { border-color:#fca5a5; color:var(--pu-red); } .pu-btn-d:hover:not(:disabled) { background:var(--pu-red-l); }
.pu-btn-dd { background:var(--pu-red); border-color:var(--pu-red); color:#fff; }
.pu-btn-sm { padding:.3rem .65rem; font-size:12px; }
.pu-filters { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:.6rem; padding:.55rem .9rem .9rem; }
.pu-filters label { display:block; font-size:11px; color:#475569; margin-bottom:.25rem; font-weight:500; }
.pu-filters select { width:100%; border:1px solid var(--pu-line); border-radius:7px; padding:.45rem .55rem; font-size:12px; font-family:inherit; background:#fff; color:var(--pu-ink); }

/* Barra de selección */
.pu-selbar { display:flex; align-items:center; gap:.6rem; background:var(--pu-blue-l); border:1px solid #dbe5ff; border-radius:8px; margin:.3rem .9rem 0; padding:.45rem .7rem; }
.pu-selbar .cnt { color:var(--pu-blue); font-weight:600; display:inline-flex; align-items:center; gap:.5rem; }
.pu-dd { position:relative; }
.pu-dd-menu { position:absolute; right:0; top:calc(100% + 4px); background:#fff; border:1px solid var(--pu-line); border-radius:10px; box-shadow:0 14px 30px rgba(15,23,42,.14); padding:.3rem; z-index:40; min-width:220px; }
.pu-dd-menu button { display:flex; width:100%; align-items:center; gap:.6rem; background:none; border:0; padding:.5rem .6rem; border-radius:7px; cursor:pointer; font-size:12.5px; color:#334155; font-family:inherit; text-align:left; }
.pu-dd-menu button:hover { background:var(--pu-blue-l); color:var(--pu-blue); }
.pu-dd-menu button.del { color:var(--pu-red); } .pu-dd-menu button.del:hover { background:var(--pu-red-l); }
.pu-dd-menu hr { border:0; border-top:1px solid var(--pu-line); margin:.25rem 0; }

/* Tabla */
.pu-table-wrap { overflow-x:auto; }
.pu-table { width:100%; border-collapse:collapse; }
.pu-table th { text-align:left; font-size:11px; font-weight:600; color:#334155; padding:.6rem .4rem; border-top:1px solid var(--pu-line); border-bottom:1px solid var(--pu-line); background:#fafbfd; white-space:nowrap; }
.pu-table th.sortable { cursor:pointer; } .pu-table th .srt { color:var(--pu-faint); font-size:9px; margin-left:.25rem; }
.pu-table td { padding:.5rem .4rem; border-bottom:1px solid #f0f2f6; vertical-align:middle; font-size:11.5px; }
.pu-table tr:hover td { background:#fbfcfe; }
.pu-table tr.sel td { background:#f5f8ff; }
.pu-table input[type=checkbox] { width:15px; height:15px; accent-color:var(--pu-blue); cursor:pointer; }
.pu-prod { display:flex; align-items:center; gap:.55rem; min-width:190px; }
.pu-thumb { width:36px; height:36px; border-radius:8px; object-fit:cover; background:#f1f5f9; border:1px solid #eef1f5; flex:none; display:flex; align-items:center; justify-content:center; color:var(--pu-faint); }
.pu-prod .nm { font-weight:600; color:var(--pu-ink); line-height:1.25; max-width:190px; font-size:11.5px; }
.pu-prod .ct { font-size:11px; color:var(--pu-faint); }
.pu-mono { font-size:11px; color:#334155; white-space:nowrap; letter-spacing:-.01em; }
.pu-skuml { display:inline-flex; align-items:center; gap:.35rem; }
.pu-skuml a { color:var(--pu-blue); font-size:11px; }
.pu-stock { font-weight:700; text-align:center; }
.pu-canal { line-height:1.35; font-size:11px; white-space:nowrap; }
.pu-canal .ml { display:inline-flex; width:16px; height:16px; border-radius:50%; background:#ffe600; align-items:center; justify-content:center; font-size:9px; margin-right:.3rem; vertical-align:-3px; }
.pu-canal .bar { color:#cbd5e1; margin:0 .3rem; }
.pu-canal .act { color:var(--pu-green); } .pu-canal .pau { color:var(--pu-red); }
.pu-canal .dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--pu-green); margin-right:.3rem; vertical-align:1px; }
.pu-canal .cta { color:#475569; } .pu-canal .mas { color:var(--pu-blue); margin-left:.3rem; }
.pu-canal .none { color:var(--pu-faint); }
.pu-pill { display:inline-flex; align-items:center; gap:.3rem; border-radius:999px; padding:.18rem .5rem; font-size:10.5px; font-weight:600; white-space:nowrap; }
.pu-pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.pu-pill.ok { background:var(--pu-green-l); color:#15803d; }
.pu-pill.warn { background:var(--pu-amber-l); color:#b45309; }
.pu-pill.err { background:var(--pu-red-l); color:#b91c1c; }
.pu-pill.mut { background:#f1f5f9; color:#475569; }
.pu-pill.nodot::before { display:none; }
.pu-acts { display:flex; gap:.35rem; align-items:center; justify-content:flex-end; }
.pu-ver { background:var(--pu-blue-l); color:var(--pu-blue); border:0; border-radius:7px; padding:.35rem .65rem; font-weight:700; font-size:12px; cursor:pointer; font-family:inherit; }
.pu-kebab { background:#fff; border:1px solid var(--pu-line); border-radius:7px; width:28px; height:28px; cursor:pointer; color:#475569; display:inline-flex; align-items:center; justify-content:center; }
.pu-empty { text-align:center; padding:2.5rem 1rem; color:var(--pu-sub); }
.pu-foot { display:flex; align-items:center; gap:1rem; padding:.75rem .9rem; font-size:12px; color:var(--pu-sub); }
.pu-foot select { border:1px solid var(--pu-line); border-radius:7px; padding:.3rem .45rem; font-family:inherit; }
.pu-pager { display:flex; gap:.3rem; align-items:center; }
.pu-pager button { min-width:28px; height:28px; border:1px solid var(--pu-line); background:#fff; border-radius:7px; cursor:pointer; font-size:12px; color:#334155; font-family:inherit; }
.pu-pager button.on { background:var(--pu-blue); color:#fff; border-color:var(--pu-blue); }
.pu-pager button:disabled { opacity:.45; cursor:default; }
.pu-pager span { color:var(--pu-faint); padding:0 .2rem; }
.pu-sim { display:inline-flex; align-items:center; gap:.4rem; background:#fffbeb; border:1px solid #fde68a; color:#92400e; border-radius:999px; padding:.3rem .7rem; font-size:11.5px; font-weight:600; white-space:nowrap; }

/* Modal */
.pu-modal-bg { position:fixed; inset:0; background:rgba(15,23,42,.38); z-index:90; display:flex; align-items:center; justify-content:center; padding:1rem; }
.pu-modal { background:#fff; border-radius:12px; width:100%; max-width:440px; box-shadow:0 24px 60px rgba(15,23,42,.28); padding:1.1rem 1.1rem 1rem; max-height:90vh; overflow:auto; }
.pu-modal.wide { max-width:720px; }
.pu-modal-h { display:flex; align-items:flex-start; gap:.7rem; }
.pu-modal-h h3 { margin:0; font-size:16px; font-weight:700; }
.pu-modal-h p { margin:.2rem 0 0; color:var(--pu-sub); font-size:12px; }
.pu-modal-h .x { margin-left:auto; background:none; border:0; font-size:16px; color:var(--pu-faint); cursor:pointer; }
.pu-opt { display:flex; align-items:center; gap:.85rem; width:100%; text-align:left; border:1px solid var(--pu-line); border-radius:10px; padding:.75rem .85rem; background:#fff; cursor:pointer; margin-top:.6rem; font-family:inherit; }
.pu-opt:hover, .pu-opt.on { border-color:#bfd0fe; background:#f5f8ff; }
.pu-opt .oi { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:15px; flex:none; }
.pu-opt .ot { font-weight:700; font-size:13px; color:var(--pu-ink); }
.pu-opt .od { font-size:11.5px; color:var(--pu-sub); margin-top:.15rem; }
.pu-opt .chev { margin-left:auto; color:var(--pu-faint); }
.pu-modal-f { display:flex; justify-content:flex-end; gap:.5rem; margin-top:.9rem; }
.pu-field { margin-top:.7rem; } .pu-field label { display:block; font-size:12px; font-weight:600; margin-bottom:.3rem; color:#334155; }
.pu-field input, .pu-field textarea, .pu-field select { width:100%; border:1px solid var(--pu-line); border-radius:8px; padding:.5rem .6rem; font-family:inherit; font-size:12.5px; }
.pu-res { margin-top:.7rem; background:#f8fafc; border:1px solid var(--pu-line); border-radius:8px; padding:.6rem .7rem; font-size:12px; }
.pu-res ul { margin:.35rem 0 0; padding-left:1.1rem; max-height:180px; overflow:auto; }

/* ---------------- DETALLE ---------------- */
.pu-back { display:inline-flex; align-items:center; gap:.4rem; color:var(--pu-blue); font-weight:600; font-size:12.5px; cursor:pointer; background:none; border:0; padding:0; font-family:inherit; }
.pu-det { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:1rem; align-items:start; }
.pu-det-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:.8rem; }
.pu-hero { display:flex; gap:1rem; align-items:flex-start; margin-bottom:1rem; }
.pu-hero-img { width:118px; height:96px; border-radius:10px; object-fit:cover; background:#f1f5f9; border:1px solid var(--pu-line); flex:none; display:flex; align-items:center; justify-content:center; color:var(--pu-faint); font-size:26px; }
.pu-hero h1 { margin:0; font-size:21px; font-weight:800; letter-spacing:-.01em; }
.pu-hero .bc { font-size:11.5px; color:var(--pu-sub); margin:.25rem 0 .7rem; display:flex; gap:.4rem; align-items:center; }
.pu-facts { display:flex; gap:1.3rem; flex-wrap:wrap; }
.pu-facts .k { font-size:10.5px; color:var(--pu-sub); max-width:80px; line-height:1.2; }
.pu-facts .v { font-size:12.5px; font-weight:700; margin-top:.3rem; }
.pu-box { background:#fff; border:1px solid var(--pu-line); border-radius:12px; padding:.9rem 1rem; margin-bottom:1rem; }
.pu-box-h { display:flex; align-items:center; gap:.6rem; }
.pu-box-h h2 { margin:0; font-size:15px; font-weight:700; }
.pu-box-h .sub { font-size:11.5px; color:var(--pu-sub); margin-top:.2rem; }
.pu-canal-h { display:flex; align-items:center; gap:.6rem; margin:1rem 0 .4rem; padding-bottom:.4rem; }
.pu-canal-h .lg { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; }
.pu-canal-h .lg.ml { background:#ffe600; color:#2d3277; } .pu-canal-h .lg.tv { background:var(--pu-blue); color:#fff; }
.pu-canal-h h3 { margin:0; font-size:14px; font-weight:700; }
.pu-canal-h .cnt { margin-left:auto; font-size:11.5px; color:var(--pu-sub); display:flex; gap:.6rem; align-items:center; }
.pu-cta-h { font-size:11.5px; font-weight:700; color:#475569; margin:.6rem 0 .2rem; display:flex; align-items:center; gap:.4rem; }
.pu-mas { display:block; width:100%; border:1px dashed #c7d2fe; background:#f8faff; color:var(--pu-blue); border-radius:8px; padding:.45rem; font-weight:600; font-size:12px; cursor:pointer; margin-top:.4rem; font-family:inherit; }
.pu-side .pu-box { padding:.85rem .9rem; }
.pu-stock-big { display:flex; align-items:center; gap:.6rem; margin:.4rem 0 .6rem; }
.pu-stock-big .num { font-size:30px; font-weight:800; }
.pu-stock-note { display:flex; gap:.7rem; background:#f6f8ff; border-radius:8px; padding:.6rem .65rem; font-size:11.5px; color:#475569; line-height:1.4; }
.pu-stock-note i { color:var(--pu-blue); font-size:20px; margin-top:.2rem; }
.pu-qa { display:flex; flex-direction:column; gap:.45rem; margin-top:.6rem; }
.pu-qa .pu-btn { justify-content:center; width:100%; }
.pu-sum { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:.6rem; }
.pu-sum .it { display:flex; gap:.55rem; align-items:center; }
.pu-sum .it i { width:30px; height:30px; border-radius:8px; background:var(--pu-blue-l); color:var(--pu-blue); display:flex; align-items:center; justify-content:center; font-size:12px; flex:none; }
.pu-sum .it .n { font-weight:800; font-size:14px; line-height:1; } .pu-sum .it .l { font-size:10.5px; color:var(--pu-sub); }
.pu-act { display:flex; gap:.6rem; padding:.5rem 0; border-bottom:1px solid #f1f4f8; }
.pu-act:last-child { border-bottom:0; }
.pu-act .ai { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; flex:none; }
.pu-act .at { font-weight:700; font-size:12px; } .pu-act .ad { font-size:11px; color:var(--pu-sub); }
.pu-act .af { margin-left:auto; font-size:11px; color:var(--pu-sub); white-space:nowrap; }
.pu-link { color:var(--pu-blue); background:var(--pu-blue-l); border:0; border-radius:6px; padding:.2rem .55rem; font-size:11.5px; font-weight:600; cursor:pointer; font-family:inherit; }
.pu-kmenu { position:absolute; right:0; top:calc(100% + 4px); background:#fff; border:1px solid var(--pu-line); border-radius:9px; box-shadow:0 12px 26px rgba(15,23,42,.14); padding:.25rem; z-index:30; min-width:200px; }
.pu-kmenu button { display:flex; width:100%; gap:.5rem; align-items:center; background:none; border:0; padding:.45rem .6rem; border-radius:6px; cursor:pointer; font-size:12px; color:#334155; text-align:left; font-family:inherit; }
.pu-kmenu button:hover { background:#f5f8ff; }
.pu-kmenu button.del { color:var(--pu-red); }
.pu-rel { position:relative; display:inline-block; }

@media (max-width: 1280px) { .pu-cards { grid-template-columns:repeat(4, minmax(0,1fr)); } .pu-filters { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width: 1100px) { .pu-det { grid-template-columns:1fr; } }
@media (max-width: 720px) { .pu-cards { grid-template-columns:repeat(2, minmax(0,1fr)); } .pu-filters { grid-template-columns:1fr 1fr; } .pu-tools { flex-wrap:wrap; } .pu-head { flex-direction:column; } }

.pu-head-r { display:flex; gap:.5rem; align-items:center; }

/* Comparación SKU producto vs SKU Mercado Libre, a simple vista */
.pu-skuml.ok .cmp { color:var(--pu-green); font-size:11px; }
.pu-skuml.no .cmp { color:var(--pu-red); font-size:11px; }
.pu-skuml.no .pu-mono { color:var(--pu-red); font-weight:600; }
/* «+X más» en la fila: botón con aspecto de enlace */
.pu-canal button.mas, .pu-subpubs button.mas { background:none; border:0; padding:0 0 0 .3rem; color:var(--pu-blue); cursor:pointer; font-family:inherit; font-size:11px; font-weight:600; }
.pu-table tr.pu-sub td { background:#f8faff; padding:.5rem .6rem .7rem; }
.pu-subpubs { display:flex; flex-direction:column; gap:.45rem; }
.pu-subcanal-t { font-size:11px; font-weight:700; color:#334155; margin-bottom:.2rem; }
.pu-subcuenta { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; margin-left:.4rem; }
.pu-subcuenta-n { font-size:11px; font-weight:700; color:#475569; min-width:110px; }
.pu-subpub { font-size:10.5px; border:1px solid var(--pu-line); background:#fff; border-radius:6px; padding:.1rem .45rem; color:#334155; }
.pu-subpub a { color:inherit; text-decoration:none; }
.pu-subpub.act { border-color:#bbf7d0; } .pu-subpub.pau { border-color:#fde68a; }

/* Filtros activos: ningún filtro queda aplicado sin verse */
.pu-activos { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; padding:0 .9rem .7rem; }
.pu-activos .lbl { font-size:11.5px; color:var(--pu-sub); font-weight:600; margin-right:.2rem; }
.pu-chip { display:inline-flex; align-items:center; gap:.35rem; background:var(--pu-blue-l); color:var(--pu-blue); border:1px solid #dbe5ff; border-radius:999px; padding:.18rem .6rem; font-size:11.5px; font-weight:600; cursor:pointer; font-family:inherit; }
.pu-chip i { font-size:10px; }
/* Detalle: contexto de cuenta */
.pu-contexto { display:flex; align-items:center; gap:.6rem; background:var(--pu-blue-l); border:1px solid #dbe5ff; border-radius:8px; padding:.45rem .75rem; margin:.7rem 0 .2rem; font-size:12px; color:#1e3a8a; }
.pu-contexto b { font-weight:700; }
/* Motivo con su causa concreta, conjunto completo del filtro y resultado desglosado (2026-10-06) */
.pu-motdet { font-size:11px; color:#64748b; line-height:1.3; margin-top:3px; max-width:260px; }
.pu-selall { margin-left:.5rem; }
.pu-desglose { margin-top:.5rem; font-size:12.5px; }
.pu-desglose ul { margin:.2rem 0 .5rem 1rem; padding:0; }
.pu-antesdesp { margin-top:.3rem; padding:.35rem .55rem; background:#f8fafc; border-radius:6px; }
.pu-res-det { max-height:220px; overflow:auto; font-size:11.5px; color:#475569; }
.pu-sync { font-size:11px; color:#16a34a; margin-top:2px; }
.pu-sync.dif { color:#dc2626; font-weight:600; }