/* ProdPlus B2B — hoja de estilos de la tienda.
   Look industrial: neutros fríos + acento teal. Server-rendered, sin framework. */
:root{
  --bg:#f4f6f8; --surface:#ffffff; --surface-2:#eef1f5;
  --ink:#18202b; --ink-muted:#5b6673; --ink-soft:#8a95a3;
  --border:#dde2e8; --border-strong:#c7cfd8;
  /* Azul corporativo IIPSA (del logo). --accent-dark se usa en texto/enlaces
     porque el azul del logo no da contraste suficiente sobre blanco. */
  --accent:#0091d5; --accent-dark:#0a6690; --accent-soft:#e2f2fb;
  --warn:#9a5b00; --danger:#a83232; --danger-soft:#f7e3e3;
  --good:#2f7d4f; --good-soft:#e4f1e9;
  --radius:10px; --shadow:0 1px 2px rgba(20,28,40,.05),0 6px 18px rgba(20,28,40,.06);
  --header-h:64px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:15px; line-height:1.5;
}
a{color:var(--accent-dark); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:1200px; margin:0 auto; padding:0 20px}
.tabnum{font-variant-numeric:tabular-nums}

/* ---------- Header ---------- */
.topbar{background:var(--ink); color:#cdd6e0; font-size:12.5px}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; height:34px; gap:16px}
.topbar a{color:#cdd6e0}
.topbar .who b{color:#fff}
.masthead{background:var(--surface); border-bottom:1px solid var(--border)}
.masthead .wrap{display:flex; align-items:center; gap:24px; height:var(--header-h)}
.logo{display:flex; align-items:center; gap:11px; font-weight:700; font-size:20px; color:var(--ink); letter-spacing:-.02em; white-space:nowrap}
.logo:hover{text-decoration:none}
.logo-img{height:34px; width:auto; display:block}
.logo-prod{font-size:19px; padding-left:11px; border-left:1px solid var(--border-strong); color:var(--ink)}
.logo .plus{color:var(--accent)}
@media(max-width:900px){ .logo-prod{display:none} }

/* Logo en la pantalla de acceso (tarjeta blanca, el logo es oscuro) */
.login-logo{display:block; width:190px; max-width:70%; height:auto; margin:0 auto 14px}
.login-prod{text-align:center; font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--ink)}
.search{flex:1; display:flex; max-width:640px}
.search input{flex:1; border:1.5px solid var(--border-strong); border-right:0; border-radius:8px 0 0 8px; padding:10px 14px; font-size:15px; outline:none}
.search input:focus{border-color:var(--accent)}
.search button{border:0; background:var(--accent); color:#fff; padding:0 20px; border-radius:0 8px 8px 0; font-weight:600; cursor:pointer}
.search button:hover{background:var(--accent-dark)}
.hdr-actions{display:flex; align-items:center; gap:18px; margin-left:auto}
.hdr-actions .link{display:flex; flex-direction:column; align-items:center; font-size:11.5px; color:var(--ink-muted); gap:2px}
.hdr-actions .link b{font-size:13px; color:var(--ink)}
.hdr-actions .link:hover{color:var(--accent-dark); text-decoration:none}

/* category nav */
.catnav{background:var(--surface-2); border-bottom:1px solid var(--border)}
.catnav .wrap{display:flex; gap:4px; align-items:center; height:44px; overflow-x:auto}
.catnav a{padding:7px 13px; border-radius:7px; font-size:13.5px; color:var(--ink-muted); white-space:nowrap; font-weight:500}
.catnav a:hover{background:var(--surface); color:var(--accent-dark); text-decoration:none}
.catnav a.all{color:var(--accent-dark); font-weight:600}

/* ---------- Panel de administración (barra lateral) ---------- */
.admin-entry b{color:var(--accent-dark)}
.admin-shell{display:flex; gap:24px; align-items:flex-start}
.admin-side{width:216px; flex:0 0 216px; position:sticky; top:14px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:10px}
.admin-side-cab{font-size:12px; font-weight:700; color:var(--ink); text-transform:uppercase;
  letter-spacing:.05em; padding:4px 8px 8px; border-bottom:1px solid var(--border); margin-bottom:6px}
.admin-side nav h5{margin:12px 8px 4px; font-size:11px; color:var(--ink-soft); font-weight:700;
  text-transform:uppercase; letter-spacing:.04em}
.admin-side nav h5:first-child{margin-top:2px}
.admin-side nav a{display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:7px;
  font-size:13.5px; color:var(--ink-muted); font-weight:500}
.admin-side nav a:hover{background:var(--surface-2); color:var(--ink); text-decoration:none}
.admin-side nav a.act{background:var(--accent-soft); color:var(--accent-dark); font-weight:600}
.admin-side nav a .ic{width:18px; text-align:center; font-size:14px}
.admin-main{flex:1; min-width:0}
@media (max-width:820px){
  .admin-shell{flex-direction:column; gap:14px}
  .admin-side{position:static; width:100%; flex-basis:auto}
  .admin-side-cab{display:none}
  .admin-side nav{display:flex; gap:4px; overflow-x:auto}
  .admin-side nav h5{display:none}
  .admin-side nav a{white-space:nowrap; padding:7px 11px}
}

/* ---------- Layout ---------- */
main{padding:26px 0 60px; min-height:60vh}
.page-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:18px; flex-wrap:wrap}
h1{font-size:24px; margin:0 0 2px; letter-spacing:-.01em}
h2{font-size:18px; margin:28px 0 12px}
.muted{color:var(--ink-muted)}
.crumb{font-size:13px; color:var(--ink-muted); margin-bottom:10px; display:flex; gap:6px; flex-wrap:wrap}
.crumb a{color:var(--ink-muted)} .crumb .sep{color:var(--ink-soft)}

.layout{display:grid; grid-template-columns:230px 1fr; gap:26px; align-items:start}
@media(max-width:820px){ .layout{grid-template-columns:1fr} .sidebar{order:2} }

.sidebar{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}
.sidebar h3{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin:0 0 10px}
.sidebar+.sidebar,.sidebar .grp+.grp{margin-top:16px}
.sidelist{list-style:none; margin:0; padding:0}
.sidelist li{margin:2px 0}
.sidelist a{display:block; padding:5px 8px; border-radius:6px; font-size:13.5px; color:var(--ink-muted)}
.sidelist a:hover,.sidelist a.on{background:var(--accent-soft); color:var(--accent-dark); text-decoration:none}

/* ---------- Product grid ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .15s,border-color .15s}
.card:hover{box-shadow:var(--shadow); border-color:var(--border-strong)}
.card .thumb{height:150px; background:var(--surface-2); display:grid; place-items:center; padding:12px; border-bottom:1px solid var(--border)}
.card .thumb img{max-height:126px; object-fit:contain; mix-blend-mode:multiply}
.card .thumb .ph{color:var(--ink-soft); font-size:12px; text-align:center}
.card .body{padding:12px 13px 14px; display:flex; flex-direction:column; gap:6px; flex:1}
.card .brand{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-dark); font-weight:700}
.card .name{font-size:13.5px; color:var(--ink); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:37px}
.card .name:hover{color:var(--accent-dark)}
.card .desc{margin:0; font-size:12px; color:var(--ink-muted); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card .sku{font-size:11.5px; color:var(--ink-soft)}
.card .foot{margin-top:auto; display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding-top:6px}
.card .price{font-size:17px; font-weight:700; color:var(--ink)}
.card .price small{font-size:11px; font-weight:500; color:var(--ink-soft); display:block}
.cur{font-size:.62em; font-weight:600; color:var(--ink-soft); letter-spacing:.03em; vertical-align:2px}
.grupo-moneda{margin-bottom:28px}
.grupo-moneda + .grupo-moneda{padding-top:20px;border-top:2px dashed var(--border-strong)}
.grupo-titulo{font-size:16px;margin:6px 0 10px}
/* Tarjetas de estadística (reporte de accesos) */
.stat-row{display:flex;flex-wrap:wrap;gap:14px;margin:14px 0 6px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:14px 18px;min-width:150px;display:flex;flex-direction:column;gap:2px}
.stat .n{font-size:26px;font-weight:700;color:var(--ink);line-height:1}
.stat .l{font-size:12px;color:var(--ink-muted)}
.stat.alerta{border-color:var(--danger);background:var(--danger-soft)}
.stat.alerta .n{color:var(--danger)}
.btn{border:0; border-radius:7px; padding:8px 12px; font-size:13px; font-weight:600; cursor:pointer; background:var(--accent); color:#fff}
.btn:hover{background:var(--accent-dark); text-decoration:none}
.btn.ghost{background:var(--surface); color:var(--accent-dark); border:1px solid var(--border-strong)}
.btn.ghost:hover{background:var(--accent-soft)}
.btn.sm{padding:6px 10px; font-size:12px}
.btn.block{display:block; width:100%; text-align:center}
.btn.inactivo{background:var(--surface-2);color:var(--ink-soft);cursor:not-allowed;
  border:1px solid var(--border-strong);display:inline-block;padding:8px 12px;border-radius:7px;
  font-size:13px;font-weight:600}
/* Botón destructivo: sólido para la acción final, ghost para acciones por renglón */
.btn.danger{background:var(--danger);color:#fff}
.btn.danger:hover{background:#8f2a2a}
.btn.ghost.danger{background:var(--surface);color:var(--danger);border-color:var(--danger-soft)}
.btn.ghost.danger:hover{background:var(--danger-soft)}
/* Acciones agrupadas en una celda/encabezado */
.fila-acciones{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.fila-acciones form{margin:0}
/* Barra de acciones en LOTE (selección múltiple estilo gestor moderno) */
.bulk-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;
  padding:10px 14px;border:1px solid var(--border);border-radius:9px;background:var(--accent-soft)}
.bulk-bar.is-empty{background:var(--surface-2);opacity:.65}
.bulk-bar.is-empty .btn,.bulk-bar.is-empty .bulk-fecha input{pointer-events:none}
.bulk-count{font-size:13px}
.bulk-sep{flex:0 0 1px;align-self:stretch;background:var(--border-strong);margin:0 2px}
.bulk-fecha{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink-muted)}
.bulk-fecha input{padding:3px 6px;font-size:12px;border:1px solid var(--border-strong);
  border-radius:6px;background:var(--surface)}
.check-col{width:34px;text-align:center}
.check-col input{width:16px;height:16px;cursor:pointer}
/* Filtro de la tabla de precios */
.tabla-filtro{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.tabla-filtro input[type=search]{flex:1 1 320px;max-width:420px;padding:8px 12px;font-size:13px;
  border:1px solid var(--border-strong);border-radius:8px;background:var(--surface)}
.tabla-filtro .filtro-marca{padding:8px 10px;font-size:13px;
  border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);max-width:200px}
.tabla-filtro #filtro-info{font-size:12.5px;white-space:nowrap}
.tabla-filtro .chk-img{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-muted);
  white-space:nowrap;cursor:pointer}
.tabla-filtro .chk-img input{width:15px;height:15px;cursor:pointer}
/* Columna de foto: oculta por omisión; se muestra al activar «Mostrar imágenes» */
.img-col{display:none}
#tabla-precios.mostrar-img .img-col{display:table-cell}
.foto-mini{width:56px;height:56px;object-fit:contain;border:1px solid var(--border);
  border-radius:6px;background:#fff;display:block}
.foto-mini.sin-foto{display:grid;place-items:center;color:var(--ink-soft);background:var(--surface-2)}
/* Al mostrar imágenes se ensancha SOLO el contenido principal (no el encabezado) */
body.precios-ancha main > .wrap{max-width:min(1560px,calc(100vw - 40px));transition:max-width .2s ease}
/* Editor colapsable de la lista */
.editor-lista{margin:0 0 20px;border:1px solid var(--border);border-radius:10px;
  background:var(--surface-2);padding:0 14px}
.editor-lista>summary{cursor:pointer;font-weight:600;padding:12px 2px;list-style:none}
.editor-lista>summary::-webkit-details-marker{display:none}
.editor-lista>summary::before{content:"✎ ";opacity:.6}
.editor-lista[open]>summary{border-bottom:1px solid var(--border);margin-bottom:14px}
.editor-lista .card-form{padding-bottom:16px}
/* Zona de riesgo: acciones irreversibles, visualmente separadas */
.zona-riesgo{margin-top:34px;border:1px solid var(--danger-soft);border-radius:10px;
  background:var(--danger-soft);padding:4px 18px 18px}
.zona-riesgo h2{color:var(--danger);border:0;font-size:15px}
.zona-riesgo-fila{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}

.tag{display:inline-block; font-size:11px; padding:2px 8px; border-radius:999px; background:var(--surface-2); color:var(--ink-muted); border:1px solid var(--border)}
.tag.ext{background:var(--good-soft); color:var(--good); border-color:transparent}
.tag.tu-precio{background:var(--accent-soft); color:var(--accent-dark); border-color:transparent; font-weight:700}
.tag.desc{background:#fdecec; color:var(--danger); border-color:transparent; font-weight:700}
.card .tag.tu-precio{align-self:flex-start; margin-top:2px}
.stock{font-size:11.5px; line-height:1.35; color:var(--ink-muted); margin-top:4px;
  padding-top:8px; border-top:1px solid var(--border)}
.stock .pt{font-weight:700}
.stock.ok{color:var(--good)}
.stock.ok .pt{color:var(--good)}
.stock.pedido{color:var(--ink-muted)}
.stock.pedido .pt{color:var(--warn)}
.stock .fecha{display:block; font-size:10.5px; color:var(--ink-soft); font-weight:500}
.entrega{font-size:11.5px; line-height:1.35; color:var(--ink-muted); margin-top:3px}
.entrega .pt{font-weight:700; color:var(--ink)}
.stock-detalle .entrega{font-size:13px; margin-top:6px}
/* Ojo: `.linea-producto .datos b` es display:block (para el nombre del
   producto), asi que aqui la etiqueta va en un span .pt y NO en un <b>:
   con <b> el plazo se partia en dos renglones. */
.entrega-linea{display:block; font-size:12px; color:var(--ink-muted); margin-top:2px}
.entrega-linea .pt{color:var(--ink); font-weight:600}
.stock-detalle .stock{font-size:13px; margin-top:12px; padding-top:12px}
.stock-detalle .stock .fecha{font-size:11.5px}

/* precio negociado en la ficha */
.price-origin{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px; font-size:13px}
.tachado{margin-top:6px; font-size:13px; color:var(--ink-muted); display:flex; gap:8px; align-items:center}
.tachado s{color:var(--ink-soft)}
table.escalas{width:100%; border-collapse:collapse; margin-top:16px; font-size:13.5px; border:1px solid var(--border); border-radius:8px; overflow:hidden}
table.escalas caption{caption-side:top; text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); padding-bottom:6px}
table.escalas th{background:var(--surface-2); text-align:left; padding:7px 10px; font-size:12px; color:var(--ink-muted)}
table.escalas td{padding:7px 10px; border-top:1px solid var(--border)}

/* ---------- Product detail ---------- */
.detail{display:grid; grid-template-columns:minmax(0,440px) 1fr; gap:34px; align-items:start}
@media(max-width:820px){ .detail{grid-template-columns:1fr} }
.gallery{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.gallery .main{height:340px; display:grid; place-items:center}
.gallery .main img{max-height:320px; object-fit:contain; mix-blend-mode:multiply}
.gallery .thumbs{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.gallery .thumbs img{width:56px;height:56px;object-fit:contain;border:1px solid var(--border);border-radius:6px;padding:4px;cursor:pointer;background:var(--surface-2)}
.detail .brand{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-dark);font-weight:700}
.detail h1{font-size:22px; margin:4px 0 8px}
.detail .sku{color:var(--ink-muted); font-size:13px}
.buybox{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); margin:18px 0}
.buybox .price{font-size:28px; font-weight:800}
.buybox .price small{font-size:13px; color:var(--ink-soft); font-weight:500}
.buybox .ref{font-size:12px; color:var(--warn); margin-top:2px}
.qtyrow{display:flex; gap:10px; align-items:center; margin-top:14px}
.qtyrow input{width:72px; padding:8px; border:1px solid var(--border-strong); border-radius:7px; text-align:center}
.specs{width:100%; border-collapse:collapse; font-size:13.5px; margin-top:8px}
.specs td{padding:7px 10px; border-bottom:1px solid var(--border)}
.specs td:first-child{color:var(--ink-muted); width:180px}
.doclist{list-style:none;padding:0;margin:8px 0}
.doclist li{padding:8px 0;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:center}
.doclist .ico{color:var(--accent-dark)}

/* ---------- Flash / misc ---------- */
.flash{padding:11px 16px;border-radius:8px;margin-bottom:16px;font-size:14px}
.flash.error{background:var(--danger-soft);color:var(--danger)}
.flash.ok{background:var(--good-soft);color:var(--good)}
.flash.info{background:var(--accent-soft);color:var(--accent-dark)}
.empty{text-align:center;color:var(--ink-muted);padding:60px 20px}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;background:linear-gradient(160deg,#0e2a30,#0b5c6b 60%,#0f7a8c)}
.login-card{background:var(--surface);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.35);width:100%;max-width:390px;padding:34px 32px}
.login-card .logo{justify-content:center;font-size:24px;margin-bottom:4px}
.login-card .sub{text-align:center;color:var(--ink-muted);font-size:13.5px;margin-bottom:22px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;color:var(--ink-muted);margin-bottom:5px;font-weight:600}
.field input{width:100%;padding:11px 13px;border:1.5px solid var(--border-strong);border-radius:8px;font-size:15px;outline:none}
.field input:focus{border-color:var(--accent)}
.field-password{position:relative}
.field-password input{padding-right:40px}
.toggle-password{position:absolute;top:0;right:0;height:100%;width:40px;display:grid;place-items:center;
  border:0;background:none;padding:0;cursor:pointer;color:var(--ink-soft)}
.toggle-password:hover{color:var(--ink)}
.toggle-password svg{grid-area:1/1}
.toggle-password .icono-ojo-tachado{display:none}
.toggle-password[aria-pressed="true"] .icono-ojo{display:none}
.toggle-password[aria-pressed="true"] .icono-ojo-tachado{display:block}
.login-card .btn{width:100%;padding:12px;font-size:15px;margin-top:6px}
.login-note{margin-top:18px;text-align:center;font-size:12px;color:var(--ink-soft)}

/* ---------- Admin: tablas y formularios ---------- */
.catnav a.admin{margin-left:auto;color:var(--accent-dark);font-weight:600}
.tabla-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin:14px 0}
table.tabla{width:100%;border-collapse:collapse;font-size:13.5px}
table.tabla thead th{background:var(--surface-2);text-align:left;padding:10px 12px;font-size:12px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink-muted);white-space:nowrap;border-bottom:1px solid var(--border)}
table.tabla td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
table.tabla tbody tr:last-child td{border-bottom:0}
table.tabla tbody tr:hover{background:var(--surface-2)}
table.tabla .num{text-align:right}
table.tabla tr.historico td{color:var(--ink-soft);background:repeating-linear-gradient(45deg,transparent,transparent 6px,rgba(0,0,0,.015) 6px,rgba(0,0,0,.015) 12px)}
table.tabla tr.programado td{background:#fbf7ec}
.tag.prog{background:var(--warn-soft, #fdf0dc);color:var(--warn);border-color:transparent;font-weight:600}
table.tabla form{margin:0}

.card-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow);display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin:10px 0 4px}
.card-form .field{margin:0;min-width:150px;flex:0 1 auto}
.card-form .field input,.card-form .field select{padding:8px 10px;font-size:14px;border:1.5px solid var(--border-strong);border-radius:7px;width:100%}
.card-form .btn{white-space:nowrap}

.tag.vig{background:var(--good-soft);color:var(--good);border-color:transparent;font-weight:600}
.tag.tipo-contrato{background:#efe4f7;color:#6b3fa0;border-color:transparent;font-weight:600}
.tag.tipo-cliente{background:var(--accent-soft);color:var(--accent-dark);border-color:transparent;font-weight:600}
.tag.tipo-volumen{background:#fdf0dc;color:var(--warn);border-color:transparent;font-weight:600}
.tag.tipo-base{background:var(--surface-2);color:var(--ink-muted);font-weight:600}
.tag.moneda{background:var(--accent-soft);color:var(--accent-dark);border-color:transparent;font-weight:700;font-size:10.5px;margin-right:2px}

/* ---------- Costos (confidencial, solo VIProyectos) ---------- */
.catnav a.admin.costos{margin-left:0;color:#8a4b00}
.aviso-confidencial{background:#fff6e6;border:1px solid #e8c98d;color:#7a4d00;
  padding:10px 14px;border-radius:8px;font-size:13px;margin:12px 0}
.costo-celda{background:#fff8ec}
.formula{font-size:12.5px;margin-top:8px}
.formula code{background:var(--surface-2);padding:1px 5px;border-radius:4px}

.costobox{background:#fffaf1;border:1px solid #e8c98d;border-radius:var(--radius);
  padding:16px 18px;margin:16px 0}
.costobox h3{margin:0 0 4px;font-size:14px;color:#7a4d00;display:flex;align-items:center;gap:7px}
.costobox .costo-val{font-size:24px;font-weight:800;color:var(--ink);margin:4px 0}
.costobox table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
.costobox td{padding:5px 0;border-bottom:1px solid #f0e3cb}
.costobox td:first-child{color:#8a6a3a}
.costobox td:last-child{text-align:right}
.costobox tr:last-child td{border-bottom:0}
.costobox .nota{font-size:11.5px;color:#8a6a3a;margin-top:8px}

.sim-result{display:grid;grid-template-columns:minmax(0,280px) 1fr;gap:18px;align-items:start;margin:16px 0}
@media(max-width:760px){.sim-result{grid-template-columns:1fr}}
.sim-precio{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.sim-precio .price{font-size:30px;font-weight:800;margin:6px 0}
.sim-result table.tabla{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.sim-result table.tabla td:first-child{color:var(--ink-muted);width:190px}

/* ---------- Carrito, pedidos y cotizaciones ---------- */
.carrito-link{position:relative}
.badge-n{position:absolute;top:-6px;right:-10px;background:var(--accent);color:#fff;font-style:normal;
  font-size:10.5px;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;padding:0 4px}
.cant-form{margin:0}
.cant-form input{width:74px;padding:6px 8px;border:1px solid var(--border-strong);border-radius:6px;text-align:right}
.cant-form input.ancho-precio{width:104px}

.resumen{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 22px;box-shadow:var(--shadow);margin:16px 0}
.resumen .total{font-size:28px;font-weight:800;margin:2px 0}

.checkout{display:grid;grid-template-columns:1fr minmax(0,340px);gap:22px;align-items:start;margin-top:14px}
@media(max-width:820px){.checkout{grid-template-columns:1fr}}
.checkout-form{flex-direction:column;align-items:stretch}
.card-form .field.ancho{min-width:100%;flex:1 1 100%}
.card-form.col{flex-direction:column;align-items:stretch;gap:12px}
.field label.check{display:flex;align-items:center;gap:7px;font-weight:600;cursor:pointer}
.field label.check input{width:auto;margin:0}
.field small.muted{display:block;margin-top:3px;font-size:11.5px}
/* Listado de productos: miniatura */
.th-mini{width:52px}
.mini-foto{width:44px;height:44px;object-fit:contain;border:1px solid var(--border);border-radius:6px;background:#fff;display:block}
.mini-foto.sinfoto{background:var(--surface-2);border-style:dashed}
/* Secciones de enriquecimiento en el formulario de producto */
.enriquecer{margin-top:26px;padding-top:18px;border-top:1px solid var(--border)}
.enriquecer h2{margin-bottom:6px}
.foto-admin-grid{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px}
.foto-admin{margin:0;width:130px;border:1px solid var(--border);border-radius:8px;padding:8px;background:#fff}
.foto-admin img{width:100%;height:110px;object-fit:contain;display:block}
.foto-admin figcaption{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:6px;font-size:11px}
.doclist-admin{list-style:none;padding:0;margin:0 0 10px}
.doclist-admin li{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border)}
.doclist-admin li a{font-weight:600}
.doclist-admin .ico{opacity:.7}
.editar-nav{margin:4px 0 16px;padding:10px 14px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:8px;font-size:13px;color:var(--ink-muted);display:flex;gap:16px;flex-wrap:wrap;align-items:center;max-width:760px}
.editar-nav a{font-weight:600}
.enriquecer{scroll-margin-top:80px}
.card-form textarea{width:100%;padding:9px 11px;border:1.5px solid var(--border-strong);border-radius:7px;
  font-family:inherit;font-size:14px;resize:vertical}
.resumen-lateral{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow)}
.resumen-lateral h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
.lineas{list-style:none;padding:0;margin:0 0 12px}
.lineas li{display:flex;gap:9px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px}
.lineas .qty{color:var(--ink-muted);min-width:32px}
.lineas .txt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lineas .imp{font-weight:600}
.tot{display:flex;justify-content:space-between;align-items:baseline;padding-top:8px;font-size:17px}

.tablero{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:14px 0}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px}
.kpi span{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
.kpi b{font-size:21px}
.kpi-alerta{border-color:var(--warn-border,#e6c58a);background:#fffaf1}
.kpi-alerta b{color:var(--warn)}

.tabla-cot tfoot td{background:var(--surface-2);border-top:2px solid var(--border-strong)}
table.tabla tr.sin-costo td{background:#fffaf1}
.dos-columnas{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px;align-items:start}
.acciones{display:flex;gap:8px;flex-wrap:wrap}

.tag.estado-carrito{background:var(--surface-2);color:var(--ink-muted)}
.tag.estado-recibido{background:var(--accent-soft);color:var(--accent-dark);font-weight:600}
.tag.estado-en_proceso{background:#fdf0dc;color:var(--warn);font-weight:600}
.tag.estado-convertido,.tag.estado-ganada{background:var(--good-soft);color:var(--good);font-weight:600}
.tag.estado-cancelado,.tag.estado-perdida{background:var(--danger-soft);color:var(--danger);font-weight:600}
.tag.estado-borrador{background:var(--surface-2);color:var(--ink-muted)}
.tag.estado-guardada{background:var(--accent-soft);color:var(--accent-dark);font-weight:600}
.tag.estado-enviada{background:#efe4f7;color:#6b3fa0;font-weight:600}

/* Datos listos para capturar la orden de venta */
.damos-erp{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow)}
.damos-erp td:first-child{color:var(--ink-muted);width:190px}
.kpi[href]:hover{border-color:var(--accent);text-decoration:none}

/* ---------- Aviso de IVA (siempre visible) ---------- */
.topbar-der,.po-der{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mas-iva-badge{font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 9px;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;white-space:nowrap}
.aviso-iva{display:block;font-size:12.5px;color:var(--ink-muted);margin-top:2px}
.aviso-iva b{color:var(--ink)}
.buybox .price small b{color:var(--ink-muted);font-weight:600}

/* ---------- Miniatura de producto ---------- */
.miniatura{position:relative;display:block;flex:0 0 auto;background:var(--surface-2);
  border:1px solid var(--border);border-radius:8px;overflow:hidden}
.miniatura:hover{border-color:var(--accent);text-decoration:none}
.miniatura.mini{width:64px;height:64px}
.miniatura.chica{width:44px;height:44px}
.miniatura img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:5px;background:#fff;mix-blend-mode:multiply}
/* El marcador va DEBAJO: si la foto del fabricante muere, el onerror quita la
   imagen y este queda a la vista (en vez del icono de imagen rota). */
.mini-ph{position:absolute;inset:0;display:grid;place-items:center;
  font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--ink-soft)}
.miniatura.chica .mini-ph{font-size:10px}

/* Renglón de carrito: miniatura + texto como una unidad */
.linea-producto{display:flex;align-items:flex-start;gap:12px}
.linea-producto .datos{min-width:0}
.linea-producto .datos b{display:block;line-height:1.35}
@media(max-width:640px){ .miniatura.mini{width:52px;height:52px} }

/* ---------- Paginación ---------- */
.pag-resumen{color:var(--ink-muted)}
.pag-tamano{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-muted);margin:0}
.pag-tamano select{padding:6px 8px;border:1px solid var(--border-strong);border-radius:7px;font-size:13px}
.paginacion{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:26px 0 6px}
.pag-btn,.pag-num{display:inline-grid;place-items:center;min-width:38px;height:38px;padding:0 12px;
  border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);
  color:var(--ink);font-size:13.5px;font-weight:500;text-decoration:none}
.pag-btn:hover,.pag-num:hover{border-color:var(--accent);color:var(--accent-dark);
  background:var(--accent-soft);text-decoration:none}
.pag-num.actual{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700;cursor:default}
.pag-num.actual:hover{background:var(--accent);color:#fff}
.pag-btn.inactivo{opacity:.4;cursor:not-allowed;background:var(--surface-2)}
.pag-btn.inactivo:hover{border-color:var(--border-strong);color:var(--ink);background:var(--surface-2)}
.pag-nums{display:flex;gap:6px;flex-wrap:wrap}
.pag-elipsis{display:inline-grid;place-items:center;min-width:24px;height:38px;color:var(--ink-soft)}
.pag-pie{text-align:center;font-size:12.5px;margin:0 0 10px}
@media(max-width:640px){ .pag-btn{padding:0 9px;font-size:12.5px} .pag-nums{gap:4px} }

/* ---------- PunchOut: admin y simulador ---------- */
pre.cxml{background:#0e1722;color:#cfe3f2;padding:16px 18px;border-radius:10px;overflow-x:auto;
  font-family:ui-monospace,Consolas,monospace;font-size:12.5px;line-height:1.5;
  white-space:pre-wrap;word-break:break-word;max-height:460px;border:1px solid #1d2b3a}
.mono{font-family:ui-monospace,Consolas,monospace}
.note-endpoints{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;box-shadow:var(--shadow);margin:14px 0}
.note-endpoints table{margin:8px 0}
.note-endpoints td{padding:5px 8px;font-size:13px}
.ladder-pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:16px 0}
.ladder-pasos div{background:var(--surface);border:1px solid var(--border);border-radius:9px;
  padding:11px 13px;font-size:13px;box-shadow:var(--shadow)}
.ladder-pasos b{color:var(--accent-dark)}

/* Contraseña recién generada: se muestra UNA vez */
.clave-nueva{background:var(--good-soft);border:1px solid var(--good);border-radius:var(--radius);
  padding:16px 18px;margin:14px 0;display:flex;flex-direction:column;gap:6px}
.clave-nueva .clave{font-family:ui-monospace,Consolas,monospace;font-size:22px;font-weight:700;
  letter-spacing:.06em;background:var(--surface);border:1px dashed var(--good);border-radius:8px;
  padding:10px 14px;display:inline-block;user-select:all}
.clave-nueva span{font-size:12.5px;color:var(--ink-muted)}

/* ---------- Modo PunchOut ---------- */
.po-barra{background:#0a3d52;color:#cfe6f2;font-size:12.5px}
.po-barra .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;
  height:34px;flex-wrap:wrap}
.po-barra b{color:#fff}
.po-barra .po-exp{opacity:.75}
.modo-punchout .hdr-actions form{margin:0}
.modo-punchout .btn[disabled]{opacity:.5;cursor:not-allowed}
.add-form{margin:0}

footer{background:var(--ink);color:#9aa6b4;font-size:13px;padding:26px 0}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* --- Revision de propuestas de clasificacion UNSPSC -----------------------
   La franja de color a la izquierda codifica la confianza: quien revisa
   necesita ver de un vistazo cuales puede despachar y cuales merecen lectura. */
.tarjeta-propuesta{
  border:1px solid var(--border); border-left-width:4px; border-radius:var(--radius);
  padding:14px 16px; margin-bottom:12px; background:var(--surface); box-shadow:var(--shadow);
}
.tarjeta-propuesta.conf-alta{border-left-color:var(--good)}
.tarjeta-propuesta.conf-media{border-left-color:var(--warn)}
.tarjeta-propuesta.conf-baja{border-left-color:var(--danger)}
.tarjeta-propuesta .cabeza{display:flex;gap:12px;align-items:center}
.tarjeta-propuesta .datos{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.tarjeta-propuesta .veredicto{display:flex;flex-direction:column;align-items:flex-end;gap:3px;
  max-width:340px;text-align:right;flex:0 0 auto}
/* El texto del SAT junto al codigo: sin el, la clave es un numero opaco. */
.nombre-unspsc{font-size:12.5px;line-height:1.35;color:var(--ink-muted)}
.alternativas .alt{white-space:nowrap}
.clave-unspsc{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:19px; font-weight:700;
  letter-spacing:.5px; font-variant-numeric:tabular-nums;
}
.tag.conf-alta{background:var(--good-soft);color:var(--good);border-color:transparent}
.tag.conf-media{background:#fdf1de;color:var(--warn);border-color:transparent}
.tag.conf-baja{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.evidencia{margin:8px 0 10px}
.lista-evidencia{margin:6px 0 0 18px;font-size:12.5px;color:var(--ink-muted)}
.acciones-propuesta{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap;margin-right:8px}
.acciones-propuesta .cambiar{display:inline-flex;gap:6px;align-items:center}
.acciones-propuesta input{width:110px;font-family:ui-monospace,Menlo,Consolas,monospace}
/* En pantallas angostas el veredicto no cabe junto a la descripcion y se
   desbordaba de la tarjeta: baja a su propio renglon. */
@media (max-width: 760px){
  .tarjeta-propuesta .cabeza{flex-wrap:wrap}
  .tarjeta-propuesta .datos{flex:1 1 100%}
  .tarjeta-propuesta .veredicto{
    align-items:flex-start; text-align:left; max-width:100%; flex:1 1 100%;
  }
  .alternativas .alt{white-space:normal}
}

/* --- Carga de precios en bloque: descargar -> editar -> subir -------------
   Los dos pasos se pintan como pasos porque el orden importa: quien llega sin
   la plantilla no sabe que el archivo de salida ES el de entrada. */
.paso-carga{
  border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 16px; background:var(--surface);
}
.paso-carga h3{margin:0 0 6px; font-size:15px; display:flex; align-items:center; gap:8px}
.num-paso{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:var(--accent); color:#fff; font-size:13px; font-weight:700;
}
.paso-carga .acciones{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.revisar{
  display:flex; align-items:flex-start; gap:8px; padding:8px 10px;
  background:var(--accent-soft); border-radius:6px; font-size:12.5px; line-height:1.4;
}
.revisar input{margin-top:2px}

/* --- Mosaico de entradas del catálogo (marcas y categorías) ---------------
   Entradas visuales con su conteo, como en los catálogos de distribuidor
   (Grainger, McMaster, Misumi): sin el número, una rama con 2 productos y otra
   con 386 se ven idénticas y el comprador pierde el viaje. */
.mosaico{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:12px; margin:10px 0 6px;
}
.ficha-nav{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); text-decoration:none; color:inherit;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.ficha-nav:hover{
  border-color:var(--accent); box-shadow:var(--shadow); transform:translateY(-1px);
  text-decoration:none;
}
.ficha-nav .sigla{
  flex:0 0 auto; width:44px; height:44px; border-radius:8px;
  display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-dark);
  font-weight:700; font-size:13px; letter-spacing:.04em;
}
.ficha-nav .sigla.cat{background:var(--surface-2); color:var(--ink-soft); font-size:18px}
.ficha-nav .datos{display:flex; flex-direction:column; gap:2px; min-width:0}
.ficha-nav .datos b{font-size:14px; line-height:1.3}
.ficha-nav .cuenta{font-size:12px; color:var(--ink-muted)}