/* Piel del portal: hoja de estilos.
   Tienda en blanco y negro: cabecera blanca, franjas negras y la mercadería sobre blanco; la vida la ponen las fotos,
   los logos de las marcas en sus colores y los puntos de entrega.
   Es la única hoja de la página, así que acá están también las utilidades que necesita portal.js ([hidden],
   .pm-visually-hidden, .pm-trampa, íconos…).
   Alcance: todo pasa dentro de <body class="pm" data-piel="bms">.
   · Clases propias de la página (cab, ingreso, hero, panel…): sin prefijo.
   · Clases que arma portal.js (pm-*) y las del dibujo que trae piel.js (card, lin, ped, galeria…):
     con :where(.pm[data-piel="bms"]) adelante → no salen de esta página y no suman especificidad (se ordenan por
     clase y por orden en la hoja).
   Celular: ≤ 860 px (menú abajo, ficha y pedido como hoja que sube); los desplegables de filtros pasan
   a hoja recién a ≤ 760 px, porque hasta ahí portal.js los ubica al lado del botón. */

/* ═══ 1. Tokens y base ═══════════════════════════════════════════════════════════════════════════════════════════ */
.pm[data-piel="bms"]{
  --negro:#0a0a0a;--negro-2:#1a1a1a;--blanco:#ffffff;--papel:#f3f3f1;--linea:#e1e1de;--linea-n:#2c2c2c;
  --gris:#66666b;--gris-n:#a8a8ad;--verde:#15803d;--azul:#1d4ed8;--rojo:#b91c1c;--wa:#25d366;
  --f-tit:'Saira Condensed','Arial Narrow',Arial,sans-serif;
  --f-txt:'IBM Plex Sans',system-ui,'Segoe UI',Arial,sans-serif;
  --ancho:1240px;--r:4px;--cab:64px;
  margin:0;min-height:100vh;background:var(--papel);color:var(--negro);color-scheme:light;
  font:15px/1.45 var(--f-txt);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* iPhone con muesca (viewport-fit=cover): la franja de arriba, blanca como la cabecera */
.pm[data-piel="bms"]::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:70;background:var(--blanco);pointer-events:none}
:where(.pm[data-piel="bms"]) *,:where(.pm[data-piel="bms"]) *::before,:where(.pm[data-piel="bms"]) *::after{box-sizing:border-box}
:where(.pm[data-piel="bms"]) :where(button,input,select,textarea){font:inherit;color:inherit}
:where(.pm[data-piel="bms"]) button{cursor:pointer;background:none;border:0;padding:0;-webkit-tap-highlight-color:transparent}
:where(.pm[data-piel="bms"]) button:disabled{cursor:not-allowed}
:where(.pm[data-piel="bms"]) img{max-width:100%;display:block}
:where(.pm[data-piel="bms"]) :where(h1,h2,h3,p){margin:0}
:where(.pm[data-piel="bms"]) a{color:inherit}
:where(.pm[data-piel="bms"]) :focus-visible{outline:2px solid var(--azul);outline-offset:2px}
:where(.pm[data-piel="bms"]) #pm-main:focus{outline:0}

/* ═══ 2. Utilidades que pide portal.js (la página no carga otra hoja) ═════════════════════════════════════════════ */
.pm[data-piel="bms"] [hidden]{display:none!important}
.pm[data-piel="bms"] .pm-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
/* .pm-trampa: fuera de la pantalla, con estas mismas reglas (no cambiarlas por display:none ni opacity:0). */
.pm[data-piel="bms"] .pm-trampa{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
.pm[data-piel="bms"] .pm-skip{position:fixed;left:16px;top:calc(10px + env(safe-area-inset-top,0px));z-index:300;padding:10px 14px;border-radius:var(--r);
  background:var(--negro);color:var(--blanco);font-weight:600;text-decoration:none}
.pm[data-piel="bms"] .pm-skip:not(:focus){width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}   /* se ve solo con el foco */
.pm[data-piel="bms"] .pm-sprite{position:absolute;width:0;height:0;overflow:hidden}
:where(.pm[data-piel="bms"]) .pm-i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:where(.pm[data-piel="bms"]) .pm-i-fill{fill:currentColor;stroke:none}

/* ═══ 3. Qué se ve según la vista (body[data-vista] lo pone portal.js: boot · auth · off · inicio · catalogo · ofertas
   · oportunidades · pedido · solicitudes) ══════════════════════════════════════════════════════════════════════ */
.pm[data-piel="bms"]:not([data-vista="auth"]) .cab-ingreso{display:none}              /* WhatsApp y «Pedí tu alta»: solo en el ingreso */
.pm[data-piel="bms"]:is([data-vista="auth"],[data-vista="boot"]) .pie{display:none}   /* el ingreso no tiene pie */
/* Título del catálogo: Catálogo / Ofertas / Oportunidades (portal.js le pone .is-ofertas o .is-oportunidades) */
#pm-catalogue:not(.is-ofertas) .cat-ofertas,#pm-catalogue:not(.is-oportunidades) .cat-oport,#pm-catalogue:is(.is-ofertas,.is-oportunidades) .cat-todo{display:none}
/* Vista «Oportunidades»: los productos del día, sin categorías, filtros ni
   contador (buscar desde la cabecera lleva al catálogo entero) */
#pm-catalogue.is-oportunidades :is(#pm-cats-wrap,#pm-catmarcas,.res,#pm-dd-marca,#pm-dd-categoria,#pm-solo-inmediata){display:none}
#pm-catalogue.is-oportunidades #pm-products{margin-top:24px}
/* Franja de marcas de dos renglones del catálogo (#pm-marcas): acá no va, la cinta está en la portada (#pm-cinta-bms) */
#pm-marcas{display:none!important}
/* Barra del total de la vista «pedido» (#pm-pedido-barra): acá no va, en el panel el total y «Pedir presupuesto» ya se ven */
#pm-pedido-barra{display:none!important}

/* ═══ 4. Piezas comunes ═════════════════════════════════════════════════════════════════════════════════════════ */
.envol{max-width:var(--ancho);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.tit{font-family:var(--f-tit);text-transform:uppercase;letter-spacing:.01em;line-height:.92;margin:0;text-wrap:balance}
.etq{font:700 11px/1 var(--f-txt);letter-spacing:.14em;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border:2px solid currentColor;border-radius:var(--r);
  font:800 16px/1 var(--f-tit);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.btn .pm-i{width:18px;height:18px}
.btn-b{background:var(--blanco);color:var(--negro);border-color:var(--blanco)}
.btn-b:hover{background:#dededa;border-color:#dededa}
.btn-n{background:var(--negro);color:var(--blanco);border-color:var(--negro)}
.btn-n:hover{background:#2a2a2a;border-color:#2a2a2a}
.btn-borde{background:var(--blanco);color:var(--negro);border-color:var(--negro)}
.btn-borde:hover{background:var(--papel)}
.btn:disabled,.btn:disabled:hover{background:#dcdcd9;border-color:#dcdcd9;color:#6f6f74}
.mini{height:38px;padding:0 12px;border:1px solid var(--linea);border-radius:var(--r);display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--blanco);color:var(--negro);font-size:13px;font-weight:600;white-space:nowrap}
.mini:hover{border-color:var(--negro)}
.mini .pm-i{width:16px;height:16px}
.link{font:800 15px/1 var(--f-tit);letter-spacing:.07em;text-transform:uppercase;border-bottom:2px solid currentColor;padding-bottom:3px;white-space:nowrap}
.link-chico{min-height:32px;font-size:13px;font-weight:600;color:var(--negro);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* Botones y piezas que arma portal.js (tarjetas, carteles, pedido y Mis pedidos) con la letra y el blanco y negro de esta página */
:where(.pm[data-piel="bms"]) .pm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:2px solid var(--negro);
  border-radius:var(--r);background:var(--blanco);color:var(--negro);font:800 15px/1 var(--f-tit);letter-spacing:.07em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap}
:where(.pm[data-piel="bms"]) .pm-btn:hover:not(:disabled){background:var(--papel)}
:where(.pm[data-piel="bms"]) .pm-btn .pm-i{width:17px;height:17px}
:where(.pm[data-piel="bms"]) .pm-btn-3d{background:var(--negro);color:var(--blanco);border-color:var(--negro)}
:where(.pm[data-piel="bms"]) .pm-btn-3d:hover:not(:disabled){background:#2a2a2a;border-color:#2a2a2a}
:where(.pm[data-piel="bms"]) .pm-btn-ghost{border-color:transparent;background:transparent;text-decoration:underline;text-underline-offset:4px}
:where(.pm[data-piel="bms"]) .pm-btn-ghost:hover:not(:disabled){background:transparent;text-decoration-thickness:2px}
:where(.pm[data-piel="bms"]) .pm-btn:disabled{background:#dcdcd9;border-color:#dcdcd9;color:#6f6f74}
:where(.pm[data-piel="bms"]) .pm-icon-btn{height:38px;padding:0 12px;border:1px solid var(--linea);border-radius:var(--r);display:inline-flex;align-items:center;gap:6px;
  background:var(--blanco);color:var(--negro);font-size:13px;font-weight:600;white-space:nowrap}
:where(.pm[data-piel="bms"]) .pm-icon-btn:hover:not(:disabled){border-color:var(--negro)}
:where(.pm[data-piel="bms"]) .pm-icon-btn .pm-i{width:16px;height:16px}
:where(.pm[data-piel="bms"]) :is(.pm-icon-btn,.mini):disabled{opacity:.5}
:where(.pm[data-piel="bms"]) .pm-chip{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px;border:1px solid var(--linea);border-radius:999px;
  background:var(--blanco);color:var(--gris);font-size:12px;font-weight:500;white-space:nowrap}
:where(.pm[data-piel="bms"]) .pm-chip-acc{background:var(--negro);border-color:var(--negro);color:var(--blanco);font:700 11px/1 var(--f-txt);letter-spacing:.12em;text-transform:uppercase}
:where(.pm[data-piel="bms"]) .pm-form-error{margin:0;padding:10px 12px;border:1px solid #f1c6c6;border-left:3px solid var(--rojo);border-radius:var(--r);
  background:#fdf3f3;color:#8f1d1d;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
:where(.pm[data-piel="bms"]) .pm-sin-foto{display:grid;place-items:center;color:#b6b6b1}
:where(.pm[data-piel="bms"]) .pm-sin-foto .pm-i{width:40px;height:40px;stroke-width:1.4}

/* Logos de las marcas (máscara del SVG pintada con el color de la marca). portal.js pasa --bc «aclarado» para fondos
   negros: los colores oscuros llegan como #ffffff, que sobre blanco no se vería → van en negro. */
:where(.pm[data-piel="bms"]) .pm-logo{display:block;background:currentColor;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
:where(.pm[data-piel="bms"]) .pm-mq-txt{font:900 17px/1 var(--f-tit);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
:where(.pm[data-piel="bms"]) .pm-mq-combo{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;max-width:100%}
:where(.pm[data-piel="bms"]) .pm-mq-combo .pm-logo{width:26px;height:26px;flex:none}
:where(.pm[data-piel="bms"]) .pm-mq-combo .pm-mq-txt{font-size:16px;letter-spacing:.02em;text-transform:none}
:where(.pm[data-piel="bms"]) .pm-mq{color:var(--bc,var(--negro))}
:where(.pm[data-piel="bms"]) .pm-mq[style*="--bc:#ffffff" i]{color:var(--negro)}

/* ═══ 5. Cabecera blanca ════════════════════════════════════════════════════════════════════════════════════════ */
.cab{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--blanco);color:var(--negro);border-bottom:1px solid var(--linea)}
/* Antes de entrar la cabecera sube con la página (fija, taparía el ingreso);
   con la sesión iniciada queda fija: ahí están el menú, el buscador, Salir y «Pedido». */
.pm[data-piel="bms"]:is([data-vista="boot"],[data-vista="auth"],[data-vista="off"]) .cab{position:relative}
.cab-in{height:var(--cab);display:flex;align-items:center;gap:22px}
.logo{display:flex;align-items:center;gap:10px;flex:none;min-width:0;color:inherit;text-decoration:none}
.logo-img{width:40px;height:40px;flex:none;object-fit:cover}
.logo-tx{display:block;min-width:0}
.logo-tx b{display:block;font:900 22px/1 var(--f-tit);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.logo-tx small{display:block;margin-top:2px;font:600 10px/1.2 var(--f-txt);letter-spacing:.16em;text-transform:uppercase;color:var(--gris);white-space:nowrap}
.menu{display:flex;gap:4px;align-self:stretch}
.menu .pm-nav-item{display:inline-flex;align-items:center;height:var(--cab);padding:0 12px;border-bottom:3px solid transparent;
  font:700 15px/1 var(--f-tit);letter-spacing:.08em;text-transform:uppercase;color:var(--gris);white-space:nowrap}
.menu .pm-nav-item:hover{color:var(--negro)}
.menu .pm-nav-item[aria-current="page"]{color:var(--negro);border-bottom-color:var(--negro)}
.cab-der{margin-left:auto;display:flex;align-items:center;gap:12px;min-width:0}
.buscar{display:flex;align-items:center;gap:8px;height:40px;min-width:0;padding:0 12px;background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);color:var(--gris)}
.cab .buscar{width:250px}
.buscar input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;color:var(--negro);font-size:14px}
.buscar input::placeholder{color:var(--gris);opacity:1}
.buscar:focus-within{border-color:var(--negro);background:var(--blanco);color:var(--negro)}
.avatar{width:36px;height:36px;flex:none;display:grid;place-items:center;overflow:hidden;border:1px solid var(--linea);border-radius:50%;background:var(--blanco);
  font:800 14px/1 var(--f-tit)}
.avatar.has-logo img{width:100%;height:100%;object-fit:contain;padding:14%}
.salir{height:40px;flex:none;font-size:13px;font-weight:600;color:var(--gris);white-space:nowrap}
.salir:hover{color:var(--negro);text-decoration:underline;text-underline-offset:3px}
.btn-ped{height:40px;flex:none;display:inline-flex;align-items:center;gap:8px;padding:0 14px;background:var(--negro);color:var(--blanco);border-radius:var(--r);
  font:800 15px/1 var(--f-tit);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.btn-ped:hover,.btn-ped.is-active{background:#2c2c2c}
.btn-ped .n{min-width:22px;height:22px;padding:0 6px;display:grid;place-items:center;background:var(--blanco);color:var(--negro);border-radius:999px;
  font:700 12px/1 var(--f-txt);font-variant-numeric:tabular-nums}
.btn-ped .n.is-pop{animation:bms-salto .45s}
.ing-wa{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--negro);text-decoration:none;font:700 14px/1 var(--f-txt);white-space:nowrap}
.ing-wa .pm-i{width:24px;height:24px;color:var(--wa)}
.ing-wa:hover span{text-decoration:underline;text-underline-offset:3px}
.btn-alta{height:40px;padding:0 14px;border:2px solid var(--negro);border-radius:var(--r);font:800 15px/1 var(--f-tit);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.btn-alta:hover{background:var(--negro);color:var(--blanco)}

/* ═══ 6. Ingreso, activación y alta (la misma tarjeta) ═══════════════════════════════════════════════════════════ */
.ingreso{min-height:100%;background:var(--papel);padding-bottom:30px}
/* La franja negra va detrás; la tarjeta queda con el mismo aire arriba (cabecera) y abajo (cinta de marcas) */
.ing-zona{position:relative;padding-block:36px;--banda:300px}
.ing-zona::before{content:"";position:absolute;inset:0 0 auto;height:var(--banda);background:var(--negro)}
.ingreso .envol{max-width:1600px}
/* Arriba de todo (no centrado): con el alta la tarjeta es muy alta y el título tiene que seguir sobre la franja negra.
   El aire de arriba del texto es el que tendría centrado con la tarjeta de ingreso. */
.ing-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(400px,1fr);gap:40px;align-items:start}
.ing-izq{padding-top:26px;min-width:0}
.ing-grid .ing-card{justify-self:center;width:400px;max-width:100%}
.ing-txt{color:var(--blanco);min-height:calc(var(--banda) - 36px - 22px)}
.ing-txt .etq{color:var(--gris-n)}
.ing-txt h1{margin-top:12px;font-size:clamp(36px,4.4vw,60px);font-weight:900}
.ing-txt h1 em,.hero h1 em{font-style:normal;-webkit-text-stroke:1.5px var(--blanco);color:transparent}
.ing-txt p{max-width:480px;margin:14px 0 0;color:var(--gris-n);font-size:15px}
.ing-izq .ing-pasos{margin-top:22px}
.ing-pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.paso{display:grid;gap:6px;align-content:start;padding:14px;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r)}
.paso b{margin-top:4px;font:800 19px/1 var(--f-tit);letter-spacing:.02em;text-transform:uppercase}
.paso small{font-size:13px;line-height:1.35;color:var(--gris)}
.dato-ico{width:42px;height:42px;flex:none;display:grid;place-items:center;background:var(--negro);color:var(--blanco);border-radius:50%}
.ing-card{position:relative;z-index:2;margin:0;padding:22px 24px 24px;background:var(--blanco);color:var(--negro);border-radius:var(--r);box-shadow:0 24px 60px #00000055}
.form{display:grid;gap:8px;min-width:0}
.form .tit{margin-bottom:4px;font-size:32px;font-weight:900}
.form > label{margin-top:4px;font-size:13px;color:var(--gris)}
.form-sub{margin:-2px 0 4px;font-size:14px;line-height:1.45;color:var(--gris)}
.campo{display:block;width:100%;height:48px;padding:0 14px;border:1px solid var(--linea);border-radius:var(--r);background:var(--papel);color:var(--negro);font-size:16px}
.campo::placeholder{color:#8e8e93;opacity:1}
.campo:focus{outline:0;border-color:var(--negro);background:var(--blanco);box-shadow:0 0 0 1px var(--negro)}
textarea.campo{height:auto;min-height:76px;padding:11px 14px;line-height:1.4;resize:vertical}
.clave{position:relative}
.clave .campo{padding-right:72px}
.clave button{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-width:44px;height:40px;padding:0 6px;color:var(--negro);
  font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ayuda{display:block;font-size:12.5px;line-height:1.45;color:var(--gris)}
.clave-aviso{margin-top:2px;padding:9px 11px;border-left:3px solid var(--negro);border-radius:0 var(--r) var(--r) 0;background:var(--papel);color:#3d3d42}
.olvido{margin:2px 0 0;font-size:13px;color:var(--gris)}
.alta-cta{display:grid;gap:8px;margin-top:6px}
.sep{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--gris)}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--linea)}
.form .btn{margin-top:12px}
.volver{justify-self:center;min-height:44px;padding:0 10px;color:var(--negro);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.volver:hover{text-decoration-thickness:2px}
/* «¿Olvidaste tu contraseña?» del ingreso: enlace subrayado, centrado, debajo de «Entrar» (abre su formulario chico) */
.olvido-btn{justify-self:center;min-height:44px;margin-top:2px;padding:0 10px;color:var(--negro);font-size:14px;font-weight:600;
  text-decoration:underline;text-decoration-color:#9a9aa0;text-underline-offset:4px}
.olvido-btn:hover{text-decoration-color:var(--negro);text-decoration-thickness:2px}
#pm-forgot-form .tit{font-size:30px;line-height:1.02}
/* Alta: con el CUIT, el servidor completa los datos fiscales */
.reg-estado{display:flex;align-items:flex-start;gap:7px;min-height:18px;margin:-2px 0 2px;font-size:13px;line-height:1.4;color:var(--gris)}
.reg-estado:is([data-tipo="busca"],[data-tipo="ok"],[data-tipo="aviso"],[data-tipo="error"])::before{content:"";flex:none;width:16px;height:16px;margin-top:1px;
  border-radius:50%;background-position:center;background-size:11px;background-repeat:no-repeat}
.reg-estado[data-tipo="busca"]::before{width:14px;height:14px;margin-top:2px;border:2px solid var(--linea);border-top-color:var(--negro);animation:bms-gira .8s linear infinite}
.reg-estado[data-tipo="ok"]{color:var(--verde);font-weight:600}
.reg-estado[data-tipo="ok"]::before{background-color:var(--verde);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E")}
.reg-estado[data-tipo="aviso"]{color:var(--azul)}
.reg-estado[data-tipo="aviso"]::before{background-color:var(--azul);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7h.01'/%3E%3C/svg%3E")}
.reg-estado[data-tipo="error"]{color:var(--rojo);font-weight:600}
.reg-estado[data-tipo="error"]::before{background-color:var(--rojo);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E")}
.reg-grid{display:grid;gap:10px;min-width:0}
.reg-contacto{grid-template-columns:minmax(0,1fr);margin-top:4px}   /* en la tarjeta de 400 px, de a uno: el mail entra entero */
.reg-full{grid-column:1/-1}
.reg-grid label{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:13px;color:var(--gris)}
.reg-grid label>span{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px}
.reg-grid label em{font-style:normal;font-size:12px;color:#8e8e93}
.reg-acepta{display:flex;align-items:flex-start;gap:10px;margin-top:6px;font-size:13px;line-height:1.4;color:var(--negro);cursor:pointer}
.reg-acepta input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--negro)}
.alta-ok{justify-items:center;padding:8px 0 2px;text-align:center}
.alta-ok .btn{justify-self:stretch}
.ok-ico{width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:var(--verde);color:#fff}
.ok-ico .pm-i{width:30px;height:30px;stroke-width:2.6}
/* Cinta de marcas del ingreso: la llena portal.js (.pm-cinta con .pm-mq); un renglón */
.cinta{margin-top:28px;overflow:hidden;background:var(--blanco);border-block:1px solid var(--linea)}
.ingreso .cinta{margin-top:0}
.cinta-ingreso:has(#pm-auth-marcas:empty){display:none}
#pm-auth-marcas{display:block;width:auto;animation:none}
.cinta-ingreso .pm-cinta{display:flex;width:max-content;animation:bms-cinta var(--dur,46s) linear infinite}
.cinta-ingreso .pm-cinta.inversa{display:none}
.cinta-ingreso:hover .pm-cinta{animation-play-state:paused}
/* Celdas de al menos 1/8 del ancho: con 9 logos por vuelta la cinta nunca deja hueco, ni en un monitor ancho */
.cinta-ingreso .pm-mq{flex:none;width:max(150px,12.5vw);height:78px;display:grid;place-items:center;padding:0 16px;border-right:1px solid var(--linea)}
.cinta-ingreso .pm-mq>.pm-logo{width:96px;height:30px}
/* La dibuja la piel (gancho marcasIngreso) con los logos oficiales a color, como la cinta de la portada */
.cinta-ingreso .pm-mq .logo-color{height:clamp(18px,var(--alto,28px),40px);max-width:110px}

/* Selects propios del alta (portal.js deja el <select> oculto y pone un botón con su lista) */
:where(.pm[data-piel="bms"]) .pm-sel{position:relative;min-width:0}
:where(.pm[data-piel="bms"]) .pm-sel-btn{width:100%;min-height:48px;display:flex;align-items:center;gap:10px;padding:6px 12px 6px 8px;border:1px solid var(--linea);
  border-radius:var(--r);background:var(--papel);color:var(--negro);font-size:15px;line-height:1.25;text-align:left}
:where(.pm[data-piel="bms"]) .pm-sel-btn:hover:not(:disabled){border-color:#9a9a9f}
:where(.pm[data-piel="bms"]) :is(.pm-sel.is-abierto .pm-sel-btn,.pm-sel-btn:focus-visible){outline:0;border-color:var(--negro);box-shadow:0 0 0 1px var(--negro);background:var(--blanco)}
:where(.pm[data-piel="bms"]) .pm-sel-btn:disabled{cursor:default;color:var(--negro);background:var(--blanco)}
:where(.pm[data-piel="bms"]) .pm-sel-placeholder{flex:1;padding-left:6px;color:#8e8e93}
:where(.pm[data-piel="bms"]) .pm-sel-valor{flex:1;min-width:0;overflow-wrap:anywhere}
:where(.pm[data-piel="bms"]) .pm-sel-chev{margin-left:auto;flex:none;display:grid;place-items:center;color:var(--gris);transition:transform .18s}
:where(.pm[data-piel="bms"]) .pm-sel-chev svg{width:18px;height:18px}
:where(.pm[data-piel="bms"]) .pm-sel.is-abierto .pm-sel-chev{transform:rotate(180deg)}
:where(.pm[data-piel="bms"]) .pm-sel.is-trabado .pm-sel-chev svg{width:15px;height:15px}
:where(.pm[data-piel="bms"]) .pm-sel-panel{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);max-height:320px;overflow-y:auto;padding:6px;
  border:1px solid var(--negro);border-radius:var(--r);background:var(--blanco);box-shadow:0 18px 40px #0000002e;outline:none;animation:bms-baja .14s ease-out}
:where(.pm[data-piel="bms"]) .pm-sel-op{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:var(--r);cursor:pointer}
:where(.pm[data-piel="bms"]) .pm-sel-op.is-activo{background:var(--papel)}
:where(.pm[data-piel="bms"]) .pm-sel-op[aria-selected="true"]{box-shadow:inset 3px 0 0 var(--negro)}
:where(.pm[data-piel="bms"]) .pm-sel-txt{display:flex;flex-direction:column;flex:1;min-width:0}
:where(.pm[data-piel="bms"]) .pm-sel-txt strong{font-size:14.5px;font-weight:600;color:var(--negro)}
:where(.pm[data-piel="bms"]) .pm-sel-txt small{font-size:12px;color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-sel-check{margin-left:auto;flex:none;color:var(--negro);opacity:0}
:where(.pm[data-piel="bms"]) .pm-sel-check svg{width:18px;height:18px}
:where(.pm[data-piel="bms"]) .pm-sel-op[aria-selected="true"] .pm-sel-check{opacity:1}
:where(.pm[data-piel="bms"]) .pm-sel-ico{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--negro);color:var(--blanco)}
:where(.pm[data-piel="bms"]) .pm-sel-ico svg{width:19px;height:19px}
:where(.pm[data-piel="bms"]) .pm-sel-btn .pm-sel-ico{width:30px;height:30px}
:where(.pm[data-piel="bms"]) .pm-sel-btn .pm-sel-ico svg{width:16px;height:16px}
:where(.pm[data-piel="bms"]) .pm-sel-ico-otro svg{fill:currentColor}
:where(.pm[data-piel="bms"]) .pm-sel-btn>.pm-sel-valor:first-child{padding-left:6px}   /* sin ícono: alineado con los campos */

/* ═══ 7. Portada (vista «inicio»): franja baja, vidriera, datos, cinta, categorías, ofertas y lo más pedido ═══════ */
.hero{overflow:hidden;background:var(--negro);color:var(--blanco)}
/* La vidriera (foto + etiqueta) entra en 420 px: el resto es para el texto */
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:30px;align-items:center;padding-block:18px 20px}
/* Desde 960 px la vidriera va 80 px más cerca del texto (su columna mide 500 y ella 420, del lado del texto); más
   angosto no, porque el título no se corta y no entraría */
@media (min-width:960px){.hero-in{grid-template-columns:minmax(0,1fr) minmax(0,500px)}.hero-in .vitrina{justify-self:start;width:min(420px,100%)}}
.hero .etq{color:var(--gris-n)}
.hero h1{margin-top:8px;font-size:clamp(32px,3.7vw,50px);font-weight:900}
/* La columna del texto mide lo que el título (que no se corta): la bajada va en ese ancho, en dos renglones, y abajo
   «Ver catálogo» y «Ver ofertas» (con un solo botón al costado, la bajada quedaba en tres renglones) */
.hero-in>:first-child{width:min-content;max-width:100%}
.hero h1.tit{white-space:nowrap}
.hero-pie{margin-top:12px}
.hero-pie p{margin:0;color:#d2d2d6;font-size:15.5px;line-height:1.45;text-wrap:balance}
.hero-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
/* 40 px de alto (en el celu, 44 para el dedo) */
.hero-btns .btn{height:40px;font-size:15px}
.hero-btns .btn:not(.btn-b){color:var(--blanco)}
:is(.hero,.cat-cab,.ofertas,.pan-cab) :focus-visible{outline-color:var(--blanco)}
/* Vidriera (la dibuja bms/piel.js): lo más pedido, una oportunidad y una oferta, un producto a la vez (.is-on); se frena
   con el mouse o el foco, en el celular se pasa deslizando de costado (pan-y: el gesto vertical sigue moviendo la página)
   y abre la ficha. La foto va en un cuadrado de puntas redondeadas de 168 px (en el celu, 128) */
.vitrina{position:relative;height:190px;touch-action:pan-y}
.vitrina .vit-item{position:absolute;inset:0 0 14px;display:grid;grid-template-columns:auto minmax(0,220px);justify-content:center;align-items:center;gap:18px;
  color:inherit;text-align:left;opacity:0;transform:translateX(16px);transition:opacity .3s,transform .3s}
.vitrina .vit-item:not(.is-on){pointer-events:none}
.vitrina .vit-item.is-on{opacity:1;transform:none;transition-delay:.3s}
.vitrina .vit-foto{grid-area:1/1;position:relative;width:168px;height:168px;display:grid;place-items:center;overflow:hidden;border-radius:20px;background:var(--blanco);
  box-shadow:0 0 0 8px #ffffff10,0 0 0 16px #ffffff08;transition:transform .2s}
.vitrina .vit-item:hover .vit-foto{transform:scale(1.04)}
/* La foto entra entera y centrada, con aire alrededor: va encima del cuadrado y se mide contra él. Con un % adentro de
   la grilla, una foto más alta que ancha se medía contra su tamaño real y se salía por abajo */
.vitrina .vit-foto img{position:absolute;inset:0;width:100%;height:100%;padding:9%;object-fit:contain}
.vitrina .vit-tag{grid-area:1/2;align-self:center;margin-top:24px;display:grid;gap:2px;max-width:220px;padding:8px 12px;border-radius:var(--r);background:var(--blanco);color:var(--negro);box-shadow:0 10px 30px #0008}
.vitrina .vit-tag small{font:700 10px/1 var(--f-txt);letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.vitrina .vit-tag b{font:900 22px/1 var(--f-tit)}
.vitrina .vit-tag span{font-size:12px;line-height:1.25;overflow-wrap:anywhere}
.vitrina .vit-tag .vit-antes{color:var(--gris)}
.vitrina .vit-ver{margin-top:4px;font:700 12px/1 var(--f-txt);font-style:normal;text-decoration:underline;text-underline-offset:3px}
.vitrina .vit-item:hover .vit-ver{text-decoration-thickness:2px}
/* El «−N %» cuelga de la punta de arriba a la derecha del cuadrado, apenas inclinado, así no tapa el producto: negro
   como el de las tarjetas, con borde blanco para que se vea sobre la foto y sobre la franja. El recuadro blanco va
   12 px más abajo que el centro del cuadrado y le deja lugar */
.vitrina .vit-off{grid-area:1/1;align-self:start;justify-self:end;z-index:1;margin:-8px -14px 0 0;padding:6px 9px;border:2px solid var(--blanco);
  border-radius:var(--r);background:var(--negro);color:var(--blanco);font:900 20px/1 var(--f-tit);transform:rotate(-3deg)}
.vitrina .vit-pts{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:flex;gap:6px}
.vitrina .vit-pts button{width:22px;height:4px;background:#ffffff40}
.vitrina .vit-pts button.is-on{background:var(--blanco)}
.vitrina .vit-foto .pm-sin-foto{width:100%;height:100%}
.datos{background:var(--blanco);border-bottom:1px solid var(--linea)}
.datos-in{display:grid;grid-template-columns:repeat(4,1fr)}
.dato{display:flex;align-items:center;gap:12px;min-width:0;padding:16px 12px}
.dato+.dato{border-left:1px solid var(--linea)}
.dato>div{min-width:0}
.dato small{display:block;font-size:12px;color:var(--gris)}
.dato b{font:800 18px/1.1 var(--f-tit);text-transform:uppercase}
.dato .wa{background:var(--wa)}
.dato .wa .pm-i{width:22px;height:22px}
.dato-link{color:inherit;text-decoration:none}
.dato-link:hover b{text-decoration:underline;text-underline-offset:3px}
.sec{padding-block:34px 10px}
.sec-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px}
.sec-cab h2{font-size:38px;font-weight:900}
.sec-cab p{margin:6px 0 0;color:var(--gris)}
/* Encabezado en un solo renglón: título | bajada (con una línea entre los dos) y, a la derecha, el enlace un poco más
   grande. En el celu, sin la bajada */
.sec-cab.en-linea{align-items:center}
.sec-cab.en-linea>div{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;min-width:0}
.sec-cab.en-linea p{margin:0;padding:4px 0 4px 18px;border-left:2px solid #c9c9cc;font-size:16px}
.sec-cab.en-linea .link{font-size:18px;padding-bottom:4px}
/* Cinta de la portada (#pm-cinta-bms, la dibuja bms/piel.js: la lista dos veces para el bucle, cada marca un botón) */
.cinta-pista{display:flex;width:max-content;animation:bms-cinta 46s linear infinite}
.cinta:is(:hover,:focus-within) .cinta-pista{animation-play-state:paused}
.cinta-pista>button{flex:none;width:150px;height:78px;display:grid;place-items:center;padding:0 14px;border-right:1px solid var(--linea)}
.cinta-pista>button:hover{background:var(--papel)}
.cinta-pista>button .logo-color{height:clamp(18px,var(--alto,28px),40px);max-width:110px}
:where(.pm[data-piel="bms"]) .mlogo{display:block;width:96px;height:30px;background:var(--c,#111);-webkit-mask:var(--l) center/contain no-repeat;mask:var(--l) center/contain no-repeat}
/* Categorías con foto (las dibuja la piel en #pm-cats-bms). Son .pm-cat para que filtre portal.js: acá no son chips. */
.cats{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.cats .cat{position:relative;display:grid;justify-items:center;gap:8px;padding:12px 10px;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);
  text-align:center;transition:transform .18s,box-shadow .18s,border-color .18s}
.cats .cat.pm-cat{height:auto;white-space:normal;font-size:inherit;font-weight:inherit;color:var(--negro)}
.cats .cat:hover{transform:translateY(-3px);box-shadow:0 10px 24px #0000001a;border-color:var(--negro)}
.cats .cat img{width:88px;height:88px;object-fit:contain}
/* Sin foto: el ícono de la categoría en un círculo */
.cats .cat .cat-ico{width:88px;height:88px;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:var(--papel);color:var(--gris)}
.cats .cat .cat-ico img{width:62%;height:62%}
.cats .cat .cat-ico .pm-i{width:34px;height:34px}
.cats .cat b{font:800 16px/1 var(--f-tit);letter-spacing:.03em;text-transform:uppercase;overflow-wrap:anywhere;hyphens:auto}
.cats .cat small{font-size:12px;color:var(--gris)}
.ofertas{margin-top:34px;padding-block:30px 34px;background:var(--negro);color:var(--blanco)}
.ofertas .sec-cab p{color:var(--gris-n)}
.riel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;
  scroll-snap-type:x mandatory}
/* Las franjas que se corren de costado no muestran la barrita fina: se pasan con las flechas (44 px) o con el dedo, y
   cada tarjeta queda alineada al borde */
.riel::-webkit-scrollbar{display:none}
.riel>*{scroll-snap-align:start}
.riel-acc{display:flex;flex:none;align-items:center;gap:8px}
.riel-acc .link{margin-left:6px}
/* Flechas llenas, bien visibles: negras con la flecha blanca (en la franja negra de Ofertas, al revés); en la punta,
   la de ese lado queda gris claro */
.riel-fl{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--negro);border-radius:50%;background:var(--negro);color:var(--blanco);
  box-shadow:0 4px 12px #0003}
.riel-fl:hover:not([aria-disabled="true"]){background:#2c2c2e}
.riel-fl[aria-disabled="true"]{border-color:var(--linea);background:var(--papel);color:#b8b8bc;box-shadow:none;cursor:default}
.riel-fl .pm-i{width:22px;height:22px;stroke-width:2.6}
.riel-fl.izq .pm-i{transform:scaleX(-1)}
.ofertas .riel-fl{border-color:var(--blanco);background:var(--blanco);color:var(--negro)}
.ofertas .riel-fl:hover:not([aria-disabled="true"]){background:#e4e4e6}
.ofertas .riel-fl[aria-disabled="true"]{border-color:#ffffff38;background:transparent;color:#ffffff59}
/* Con pocas ofertas, cada tarjeta mide lo de una de la grilla (un quinto), no el ancho entero de la franja */
.riel.con-tarjetas{grid-auto-columns:minmax(205px,calc((100% - 48px) / 5))}
/* Sin ofertas prendidas, la franja lo dice (nunca un descuento inventado) */
.riel .of-vacia{grid-column:1/-1;display:grid;gap:4px;padding:26px;border:1px dashed var(--linea-n);border-radius:var(--r);color:var(--gris-n)}
.riel .of-vacia b{color:var(--blanco);font:800 22px/1 var(--f-tit);text-transform:uppercase}
/* Oportunidades (la dibuja piel.js): franja BLANCA entre «Categorías» y
   «Ofertas» (la de ofertas es negra), con la misma fila que se desliza y las tarjetas de siempre; al lado del título,
   «Hoy» con el reloj: la selección cambia cada día. Oculta (sin la llave o sin productos), la de ofertas queda igual. */
.oport{margin-top:34px;padding-block:30px 34px;background:var(--blanco);border-block:1px solid var(--linea)}
.oport:not([hidden])+.ofertas{margin-top:0}
/* El reloj de Oportunidades, al lado del título: «Cambian en 10:23:45» (los números del mismo ancho: no baila) */
.sec-tit-fila{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.oport-reloj{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 9px;border:1.5px solid var(--negro);border-radius:999px;
  font:800 13px/1 var(--f-tit);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.oport-reloj .pm-i{width:15px;height:15px;stroke-width:2.4}
.oport-reloj b{font:900 17px/1 var(--f-tit);letter-spacing:.05em;font-variant-numeric:tabular-nums}
.cat-cab .oport-reloj{border-color:var(--blanco);color:var(--blanco)}
/* Al lado del reloj, «Aprovechalas hoy» en una píldora llena (en la franja negra, blanca) */
.oport-reloj-fila{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.oport-cta{display:inline-flex;align-items:center;padding:8px 13px;border-radius:999px;background:var(--negro);color:var(--blanco);
  font:800 13px/1 var(--f-tit);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.cat-cab .oport-cta{background:var(--blanco);color:var(--negro)}
/* Vista Oportunidades: en la franja, «Todo con entrega inmediata» (si lo que se ve lo es) y Ordenar */
.oport-inm{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid #ffffff59;border-radius:999px;
  font-size:14px;font-weight:700;white-space:nowrap}
.oport-inm .pt{width:8px;height:8px;flex:none;border-radius:50%;background:#4ade80}
#pm-catalogue:not([data-todo-inmediata="1"]) .oport-inm{display:none}

/* ═══ 8. Catálogo y Mis pedidos: franja negra con el título ═══════════════════════════════════════════════════════ */
.cat-cab{padding-block:18px;background:var(--negro);color:var(--blanco)}
/* En el catálogo común el título va solo, sin bajada: la franja queda más baja (Ofertas y Oportunidades la conservan) */
#pm-catalogue:not(.is-ofertas,.is-oportunidades) .cat-cab p{display:none}
.cat-cab h1{font-size:46px;font-weight:900}
.cat-cab p{margin:6px 0 0;color:var(--gris-n)}
/* Catálogo: la franja lleva también Marca · Categoría · Ordenar y «Solo entrega inmediata», a la derecha del título; si
   no entran en la misma línea, bajan debajo del título (alineados a la izquierda). Hasta 1100 px van siempre abajo: así
   no saltan de lugar al elegir una opción de nombre largo */
.cat-cab-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px}
.cat-cab-tx{min-width:0}
.cat-cab-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
@media (min-width:861px){.cat-cab .filtros-bar{gap:10px}}
/* Chips de categorías (#pm-cats: los arma portal.js como .pm-cat; acá sin ícono) */
.filtros{display:flex;gap:8px;overflow-x:auto;padding-block:14px;scrollbar-width:none}
.filtros::-webkit-scrollbar{display:none}
.filtros[data-deslizable]{cursor:grab}
.filtros.is-arrastrando{cursor:grabbing}
.filtros.hay-der{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
.filtros.hay-izq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px);mask-image:linear-gradient(90deg,transparent,#000 48px)}
.filtros.hay-izq.hay-der{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
.chip,:where(.pm[data-piel="bms"]) .pm-cat{flex:none;height:38px;padding:0 14px;display:inline-flex;align-items:center;gap:8px;background:var(--blanco);color:var(--negro);
  border:1px solid var(--linea);border-radius:999px;font-size:14px;font-weight:500;white-space:nowrap}
.chip:hover,:where(.pm[data-piel="bms"]) .pm-cat:hover{border-color:var(--negro)}
.chip[aria-pressed="true"],.chip[aria-checked="true"],.chip.is-on,:where(.pm[data-piel="bms"]) .pm-cat[aria-pressed="true"]{background:var(--negro);color:var(--blanco);border-color:var(--negro)}
.chip .pt{width:8px;height:8px;flex:none;border-radius:50%;background:var(--verde)}
.chip[aria-checked="true"] .pt{background:#4ade80}
:where(.pm[data-piel="bms"]) .pm-cat .pm-cat-ico{display:none}
/* Íconos 3D propios de las categorías (bms/cat3d). En el chip elegido (negro) van sobre un círculo blanco: los oscuros
   (control, teclado, PC) se perderían contra el negro. */
:where(.pm[data-piel="bms"]) .pm-cat .cat3d{width:26px;height:26px;flex:none;margin-left:-5px;object-fit:contain;pointer-events:none;border-radius:50%}
:where(.pm[data-piel="bms"]) .pm-cat[aria-pressed="true"] .cat3d{background:var(--blanco);box-shadow:0 0 0 2px var(--blanco)}
/* Filas que se corren de costado: flechas negras en las puntas, solo del lado donde hay más (en el celu, con el dedo) */
.desl-caja{position:relative}
.desl-fl{position:absolute;top:50%;z-index:3;width:40px;height:40px;transform:translateY(-50%);display:grid;place-items:center;
  border-radius:50%;background:var(--negro);color:var(--blanco);box-shadow:0 4px 14px #0005}
.desl-fl:hover{background:#2c2c2e}
.desl-fl.izq{left:-8px}
.desl-fl.der{right:-8px}
.desl-fl .pm-i{width:20px;height:20px;stroke-width:2.6}
.desl-fl.izq .pm-i{transform:scaleX(-1)}
@media (max-width:860px){.desl-fl{display:none}}

:where(.pm[data-piel="bms"]) .pm-cat-nom{max-width:220px;overflow:hidden;text-overflow:ellipsis}
.filtros-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
/* Desplegables Marca · Categoría · Orden (los arma portal.js; la lista va colgada del body y la ubica el JS) */
:where(.pm[data-piel="bms"]) .pm-dd{position:relative;flex:none;min-width:0}
:where(.pm[data-piel="bms"]) .pm-dd-btn{display:flex;align-items:center;gap:8px;height:40px;min-width:172px;max-width:240px;padding:0 12px 0 4px;
  border:1px solid var(--linea);border-radius:999px;background:var(--blanco);color:var(--negro);text-align:left}
:where(.pm[data-piel="bms"]) .pm-dd-btn:hover{border-color:var(--negro)}
:where(.pm[data-piel="bms"]) :is(.pm-dd.is-abierto .pm-dd-btn,.pm-dd-btn.is-set){border-color:var(--negro);box-shadow:inset 0 0 0 1px var(--negro)}
:where(.pm[data-piel="bms"]) .pm-dd-txt{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.12}
:where(.pm[data-piel="bms"]) .pm-dd-txt small{font:700 9.5px/1.15 var(--f-txt);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-dd-txt strong{overflow:hidden;font-size:13.5px;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
:where(.pm[data-piel="bms"]) .pm-dd-txt em{display:none}
:where(.pm[data-piel="bms"]) .pm-dd-btn>.pm-i{width:16px;height:16px;color:var(--gris);transition:transform .2s}
:where(.pm[data-piel="bms"]) .pm-dd.is-abierto .pm-dd-btn>.pm-i{transform:rotate(180deg)}
:where(.pm[data-piel="bms"]) .pm-dd-bola{width:30px;height:30px;flex:none;display:grid;place-items:center;overflow:hidden;border:1px solid var(--linea);border-radius:50%;
  background:var(--papel);color:var(--negro)}
:where(.pm[data-piel="bms"]) .pm-dd-bola[style*="--bc:"]{color:var(--bc)}
:where(.pm[data-piel="bms"]) .pm-dd-bola[style*="--bc:#ffffff" i]{color:var(--negro)}
:where(.pm[data-piel="bms"]) .pm-dd-bola .pm-logo{width:22px;height:14px}
:where(.pm[data-piel="bms"]) .pm-dd-bola .pm-i{width:15px;height:15px}
:where(.pm[data-piel="bms"]) .pm-dd-bola .pm-mini-txt{font:800 11px/1 var(--f-tit)}
:where(.pm[data-piel="bms"]) .pm-dd-bola.is-ico{border-color:var(--negro);background:var(--negro);color:var(--blanco)}
:where(.pm[data-piel="bms"]) :is(.pm-dd-bola,.pm-dd-op-ico).is-3d{border:1px solid var(--linea);background:var(--papel)}
:where(.pm[data-piel="bms"]) :is(.pm-dd-bola,.pm-dd-op-ico).is-3d img{width:80%;height:80%;object-fit:contain}
:where(.pm[data-piel="bms"]) .pm-dd-panel{position:fixed;top:0;left:0;z-index:70;width:320px;max-width:min(560px,calc(100vw - 32px));padding:6px;
  border:1px solid var(--negro);border-radius:var(--r);background:var(--blanco);color:var(--negro);box-shadow:0 22px 50px #00000033;animation:bms-baja .16s ease-out}
:where(.pm[data-piel="bms"]) .pm-dd-panel.is-marcas{width:560px}
:where(.pm[data-piel="bms"]) .pm-dd-buscar{display:flex;align-items:center;gap:8px;height:40px;margin:2px 2px 8px;padding:0 12px;border:1px solid var(--linea);
  border-radius:var(--r);background:var(--papel);color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-dd-buscar:focus-within{border-color:var(--negro);background:var(--blanco)}
:where(.pm[data-piel="bms"]) .pm-dd-buscar input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;color:var(--negro);font-size:14px}
:where(.pm[data-piel="bms"]) .pm-dd-lista{display:grid;gap:2px;max-height:min(400px,56vh);overflow-y:auto;overscroll-behavior:contain;outline:none;scrollbar-width:thin}
:where(.pm[data-piel="bms"]) .pm-dd-panel.is-marcas .pm-dd-lista{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:2px}
:where(.pm[data-piel="bms"]) .pm-dd-op{display:flex;align-items:center;gap:10px;min-width:0;padding:7px 9px;border:1px solid transparent;border-radius:var(--r);cursor:pointer}
:where(.pm[data-piel="bms"]) .pm-dd-op.is-activo{background:var(--papel)}
:where(.pm[data-piel="bms"]) .pm-dd-op[aria-selected="true"]{border-color:var(--negro)}
:where(.pm[data-piel="bms"]) .pm-dd-op-txt{display:flex;flex-direction:column;flex:1;min-width:0}
:where(.pm[data-piel="bms"]) .pm-dd-op-txt strong{overflow:hidden;font-size:14px;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
:where(.pm[data-piel="bms"]) .pm-dd-op-txt small{font-size:12px;color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-dd-check{margin-left:auto;color:var(--negro);opacity:0}
:where(.pm[data-piel="bms"]) .pm-dd-op[aria-selected="true"] .pm-dd-check{opacity:1}
:where(.pm[data-piel="bms"]) .pm-dd-op-ico{width:34px;height:34px;flex:none;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:var(--negro);color:var(--blanco)}
:where(.pm[data-piel="bms"]) .pm-dd-op-ico .pm-i{width:17px;height:17px}
:where(.pm[data-piel="bms"]) .pm-dd-tile{flex-direction:column;align-items:stretch;gap:6px;padding:5px;border:1px solid var(--linea);background:var(--blanco)}
:where(.pm[data-piel="bms"]) .pm-dd-tile[aria-selected="true"]{border-color:var(--negro);box-shadow:inset 0 0 0 1px var(--negro)}
:where(.pm[data-piel="bms"]) .pm-dd-tile-logo{height:56px;display:grid;place-items:center;padding:8px 12px;border-radius:var(--r);background:var(--papel);color:var(--bc,var(--negro))}
:where(.pm[data-piel="bms"]) .pm-dd-tile[style*="--bc:#ffffff" i] .pm-dd-tile-logo{color:var(--negro)}
:where(.pm[data-piel="bms"]) .pm-dd-tile-logo .pm-logo{width:100%;height:28px}
:where(.pm[data-piel="bms"]) .pm-dd-tile-logo .pm-mq-txt{font-size:14px}
:where(.pm[data-piel="bms"]) .pm-dd-tile-logo .pm-mq-combo .pm-logo{width:22px;height:22px}
:where(.pm[data-piel="bms"]) .pm-dd-tile-logo .pm-mq-combo .pm-mq-txt{font-size:13px}
:where(.pm[data-piel="bms"]) .pm-dd-tile.is-activo .pm-dd-tile-logo{background:#e9e9e6}
:where(.pm[data-piel="bms"]) .pm-dd-tile.is-todas .pm-dd-tile-logo{background:var(--negro);color:var(--blanco);font:800 16px/1 var(--f-tit);letter-spacing:.06em;text-transform:uppercase}
:where(.pm[data-piel="bms"]) .pm-dd-tile-nombre{overflow:hidden;padding:0 4px 2px;font-size:11.5px;font-weight:600;color:var(--gris);text-align:center;white-space:nowrap;text-overflow:ellipsis}
:where(.pm[data-piel="bms"]) .pm-dd-vacio{grid-column:1/-1;padding:18px;color:var(--gris);font-size:13px;text-align:center}
:where(.pm[data-piel="bms"]) .pm-dd-velo{display:none}
/* En la franja negra del catálogo: desplegables e interruptor con borde claro sobre el negro; elegido o abierto, borde
   blanco (el interruptor prendido, blanco con letra negra). La lista que se abre sigue clara. */
/* En la franja negra, Marca · Categoría · Ordenar y «Solo entrega inmediata» van en BLANCO: se destacan.
   Lo elegido lleva el borde negro con un anillo blanco; «Solo entrega inmediata» prendido, igual y con el punto verde
   (apagado, el punto va gris) */
.cat-cab .pm-dd-btn{border-color:var(--blanco)}
.cat-cab .pm-dd-btn:hover{box-shadow:0 0 0 2px #ffffff80}
.cat-cab :is(.pm-dd.is-abierto .pm-dd-btn,.pm-dd-btn.is-set){border-color:var(--negro);box-shadow:0 0 0 2px var(--blanco)}
.cat-cab .chip-inm{height:40px;border-color:var(--blanco)}
.cat-cab .chip-inm:hover{box-shadow:0 0 0 2px #ffffff80}
.cat-cab .chip-inm .pt{background:#c4c4c8}
.cat-cab .chip-inm[aria-checked="true"]{border-color:var(--negro);background:var(--blanco);color:var(--negro);font-weight:700;box-shadow:0 0 0 2px var(--blanco)}
.cat-cab .chip-inm[aria-checked="true"] .pt{background:var(--verde)}
/* Marcas de la categoría elegida (las arma portal.js como botones .pm-mq) */
/* Debajo de las categorías, una línea fina; las marcas de la categoría elegida van sin título (se entiende solo) */
.cats-fila{border-bottom:1px solid var(--linea)}
.catmarcas{margin:12px 0 4px}
.catmarcas-tit{margin:2px 0 8px;font:800 16px/1 var(--f-tit);letter-spacing:.06em;text-transform:uppercase}
.catmarcas-fila{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.catmarcas-fila::-webkit-scrollbar{display:none}
.catmarcas-fila[data-deslizable]{cursor:grab}
.catmarcas-fila .pm-mq{flex:none;width:136px;height:58px;display:grid;place-items:center;padding:0 14px;border:1px solid var(--linea);border-radius:var(--r);background:var(--blanco)}
.catmarcas-fila .pm-mq:hover{border-color:var(--negro)}
.catmarcas-fila .pm-mq.is-on{border-color:var(--negro);box-shadow:inset 0 0 0 1px var(--negro)}
.catmarcas-fila .pm-mq>.pm-logo{width:100%;height:28px}
.res{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:14px;color:var(--gris)}
/* Sin etiquetas de filtros ni «Limpiar filtros»: lo elegido ya se ve marcado en la franja, en las categorías
   y en las marcas, y tocar una categoría arranca de cero. Quedan en la página por el contrato de ids */
#pm-activos,#pm-clear-filters{display:none!important}
.activos{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
:where(.pm[data-piel="bms"]) .pm-activo{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 4px 0 12px;border-radius:999px;background:var(--negro);color:var(--blanco);
  font-size:13px;font-weight:600;white-space:nowrap}
:where(.pm[data-piel="bms"]) .pm-activo small{color:var(--gris-n);font-weight:500}
:where(.pm[data-piel="bms"]) .pm-activo button{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#ffffff26;color:#fff}
:where(.pm[data-piel="bms"]) .pm-activo button .pm-i{width:13px;height:13px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:12px}
.mas{display:flex;justify-content:center;margin:24px 0 6px}
/* «Ver más productos» titila en verde mientras haya más; al final de la lista, un aviso fino con borde rojo */
@keyframes mas-titila{0%,100%{box-shadow:0 0 0 0 #16a34a00}50%{box-shadow:0 0 0 7px #16a34a40}}
.mas #pm-mas{border-color:var(--verde);animation:mas-titila 1.6s ease-in-out infinite}
.mas .pm-fin{margin:0;padding:7px 16px;border:1px solid var(--rojo);border-radius:999px;font-size:13px;font-weight:500;color:var(--negro)}
@media (prefers-reduced-motion:reduce){.mas #pm-mas{animation:none;box-shadow:0 0 0 3px #16a34a40}}
:where(.pm[data-piel="bms"]) .pm-skeleton{min-height:390px;border:1px solid var(--linea);border-radius:var(--r);
  background:linear-gradient(110deg,#fff 8%,#efefec 18%,#fff 33%) 0 0/220% 100%;animation:bms-brillo 1.6s linear infinite}
:where(.pm[data-piel="bms"]) .pm-empty{grid-column:1/-1;padding:44px 24px;border:1px dashed #c9c9c5;border-radius:var(--r);background:var(--blanco);text-align:center}
:where(.pm[data-piel="bms"]) .pm-empty h2{margin-bottom:10px;font:900 30px/1 var(--f-tit);text-transform:uppercase;text-wrap:balance}
:where(.pm[data-piel="bms"]) .pm-empty p{max-width:480px;margin:0 auto 18px;color:var(--gris)}

/* ═══ 9. Tarjetas de producto ═══════════════════════════════════════════════════════════════════════════════════
   a) Las de portal.js (.pm-card): base prolija mientras la piel no dibuje las suyas. */
:where(.pm[data-piel="bms"]) .pm-card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--blanco);color:var(--negro);
  border:1px solid var(--linea);border-radius:var(--r);transition:transform .18s,box-shadow .18s,border-color .18s}
:where(.pm[data-piel="bms"]) .pm-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px #00000022;border-color:var(--negro)}
:where(.pm[data-piel="bms"]) .pm-card-in{display:flex;flex-direction:column;flex:1;min-width:0}
/* La foto, en un cuadrado que no crece con fotos altas */
:where(.pm[data-piel="bms"]) .pm-card-img{position:relative;display:block;width:100%;aspect-ratio:1/1;min-height:0;overflow:hidden;background:var(--blanco);
  border-bottom:1px solid var(--linea);cursor:zoom-in}
:where(.pm[data-piel="bms"]) .pm-card-img img{position:absolute;inset:16px;width:calc(100% - 32px);height:calc(100% - 32px);object-fit:contain;transition:transform .2s}
:where(.pm[data-piel="bms"]) .pm-card:hover .pm-card-img img{transform:scale(1.04)}
:where(.pm[data-piel="bms"]) .pm-card-img .pm-sin-foto{position:absolute;inset:0}
:where(.pm[data-piel="bms"]) .pm-card-ver{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;
  background:var(--negro);color:var(--blanco);font:700 11px/1 var(--f-txt);opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}
:where(.pm[data-piel="bms"]) .pm-card-ver .pm-i{width:14px;height:14px}
:where(.pm[data-piel="bms"]) :is(.pm-card:hover .pm-card-ver,.pm-card-img:focus-visible .pm-card-ver){opacity:1;transform:none}
:where(.pm[data-piel="bms"]) .pm-card.is-en-pedido::after{content:"En tu pedido";position:absolute;right:10px;top:10px;z-index:2;padding:6px 9px;border-radius:999px;
  background:var(--verde);color:#fff;font:700 11px/1 var(--f-txt);pointer-events:none}
:where(.pm[data-piel="bms"]) .pm-card.is-en-pedido:has(.pm-en-pedido.is-consulta)::after{content:"A confirmar";background:var(--azul)}
:where(.pm[data-piel="bms"]) .pm-card-body{display:flex;flex-direction:column;flex:1;gap:7px;min-width:0;padding:12px 14px 14px}
:where(.pm[data-piel="bms"]) .pm-card-marca{display:flex;align-items:center;gap:6px;height:20px;min-width:0;color:var(--negro)}
:where(.pm[data-piel="bms"]) .pm-card-marca .pm-logo{width:70px;height:18px;flex:none;-webkit-mask-position:left center;mask-position:left center}
:where(.pm[data-piel="bms"]) .pm-card-marca .pm-logo-sym{width:18px;height:18px}
:where(.pm[data-piel="bms"]) .pm-card-marca span:not(.pm-logo){overflow:hidden;font:700 11px/1 var(--f-txt);letter-spacing:.14em;text-transform:uppercase;color:var(--gris);
  white-space:nowrap;text-overflow:ellipsis}
:where(.pm[data-piel="bms"]) .pm-card-tit{min-height:2.6em;margin:0;font:600 14px/1.3 var(--f-txt)}
:where(.pm[data-piel="bms"]) .pm-card-tit button{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:inherit;font:inherit;
  text-align:left;overflow-wrap:anywhere}
:where(.pm[data-piel="bms"]) .pm-card-tit button:hover{text-decoration:underline;text-underline-offset:3px}
:where(.pm[data-piel="bms"]) .pm-card-cod{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
:where(.pm[data-piel="bms"]) .pm-card-sku{min-width:0;font-size:11.5px;color:var(--gris);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
:where(.pm[data-piel="bms"]) .pm-card-cod .pm-disp{display:none}           /* el plazo ya va en la línea de entrega */
:where(.pm[data-piel="bms"]) .pm-card-ent{display:flex;flex-wrap:wrap;gap:4px 12px}
:where(.pm[data-piel="bms"]) .pm-config-chip{display:inline-flex;align-items:center;gap:6px;width:max-content;max-width:100%;padding:4px 9px;border:1px solid var(--negro);
  border-radius:999px;font-size:11.5px;font-weight:600}
:where(.pm[data-piel="bms"]) .pm-config-chip .pm-i{width:13px;height:13px}
:where(.pm[data-piel="bms"]) .pm-card-precio{display:flex;flex-direction:column;gap:3px;margin-top:auto;padding-top:4px}
:where(.pm[data-piel="bms"]) .pm-card-buy{display:flex;align-items:center;gap:6px;min-height:42px;margin-top:4px}
:where(.pm[data-piel="bms"]) .pm-btn-config{width:100%}
/* «Elegí memoria y disco» en tarjetas angostas (de a dos en el teléfono): baja a dos renglones en vez de cortarse */
:where(.pm[data-piel="bms"]) .pm-card-buy .pm-btn-config{padding:6px 10px;line-height:1.1;letter-spacing:.05em;white-space:normal;text-align:center}
/* Entrega: punto verde inmediata, azul con días (sin ícono) */
:where(.pm[data-piel="bms"]) .pm-ent{display:inline-flex;align-items:center;gap:6px;font:700 12px/1.2 var(--f-txt);color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-ent::before{content:"";width:8px;height:8px;flex:none;border-radius:50%;background:currentColor}
:where(.pm[data-piel="bms"]) .pm-ent .pm-i{display:none}
:where(.pm[data-piel="bms"]) .pm-ent.is-inmediata{color:var(--verde)}
:where(.pm[data-piel="bms"]) :is(.pm-ent.is-dias,.pm-ent.is-luego){color:var(--azul)}
/* Precio: el número grande y su «+ IVA». Con dólares, dólares grandes y pesos abajo */
:where(.pm[data-piel="bms"]) .pm-pr{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;min-width:0;font-variant-numeric:tabular-nums}
:where(.pm[data-piel="bms"]) .pm-pr b{font:900 22px/1.05 var(--f-tit);white-space:nowrap}
:where(.pm[data-piel="bms"]) .pm-pr em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--gris);white-space:nowrap}
:where(.pm[data-piel="bms"]) :is(.pm-card-precio,.pm-quick-pr) .pm-pr.is-usd{order:-1}
:where(.pm[data-piel="bms"]) :is(.pm-card-precio,.pm-quick-pr) .pm-pr.is-usd b{font-size:30px;line-height:1}
:where(.pm[data-piel="bms"]) :is(.pm-card-precio,.pm-quick-pr) .pm-pr:not(.is-usd):not(:last-child) b{font:500 13px/1.3 var(--f-txt);color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-pr-chico b{font-size:16px}
:where(.pm[data-piel="bms"]) .pm-pr-consultar b{display:block;font:800 19px/1.1 var(--f-tit);text-transform:uppercase}
:where(.pm[data-piel="bms"]) .pm-pr-consultar small{display:block;margin-top:2px;font-size:12px;color:var(--gris)}
/* Ofertas: «−N %» sobre la foto y el «Antes» tachado */
:where(.pm[data-piel="bms"]) .pm-oferta-pct{position:absolute;left:10px;top:10px;z-index:2;padding:6px 8px;border-radius:var(--r);background:var(--negro);color:var(--blanco);
  font:900 17px/1 var(--f-tit)}
:where(.pm[data-piel="bms"]) .pm-antes{order:-2;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:12.5px;color:var(--gris);font-variant-numeric:tabular-nums}
:where(.pm[data-piel="bms"]) .pm-antes>span{font:700 10px/1 var(--f-txt);letter-spacing:.12em;text-transform:uppercase}
:where(.pm[data-piel="bms"]) .pm-antes s{text-decoration-thickness:1.5px}
:where(.pm[data-piel="bms"]) .pm-antes em{font-style:normal;font-size:11px}
:where(.pm[data-piel="bms"]) .pm-antes.is-chico{font-size:11.5px;gap:1px 6px}
:where(.pm[data-piel="bms"]) .pm-oferta-hasta{order:-2;display:block;font-size:12px;font-weight:700}
/* Cantidad y «Agregar» (también los usa la piel: compraHTML y stepper de portal.js) */
:where(.pm[data-piel="bms"]) .pm-step{display:inline-flex;align-items:center;flex:none;height:42px;border:1px solid var(--linea);border-radius:var(--r);background:var(--blanco)}
:where(.pm[data-piel="bms"]) .pm-step:focus-within{border-color:var(--negro)}
:where(.pm[data-piel="bms"]) .pm-step button{width:32px;align-self:stretch;display:grid;place-items:center;color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-step button:hover:not(:disabled){color:var(--negro)}
:where(.pm[data-piel="bms"]) .pm-step button .pm-i{width:16px;height:16px}
:where(.pm[data-piel="bms"]) .pm-step input{width:34px;align-self:stretch;padding:0;border:0;outline:0;background:none;color:var(--negro);font:700 15px/1 var(--f-txt);
  text-align:center;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
:where(.pm[data-piel="bms"]) .pm-step input::-webkit-inner-spin-button,:where(.pm[data-piel="bms"]) .pm-step input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
:where(.pm[data-piel="bms"]) .pm-btn-add{flex:1;min-width:0;height:42px;min-height:42px;padding:0 10px;gap:6px}
:where(.pm[data-piel="bms"]) .pm-btn-add span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* En la tarjeta: cantidad angosta y «Agregar» sin relleno, así entra entero a 1166 px. Si la tarjeta
   es más angosta, «Agregar» nunca se corta: baja a su propia línea, de ancho completo. */
:where(.pm[data-piel="bms"]) .pm-card-buy{flex-wrap:wrap}
:where(.pm[data-piel="bms"]) .pm-card-buy .pm-step button{width:30px}
:where(.pm[data-piel="bms"]) .pm-card-buy .pm-step input{width:28px}
:where(.pm[data-piel="bms"]) .pm-card-buy .pm-btn-add{flex:1 0 auto;gap:5px;padding:0 4px;border-width:0}
:where(.pm[data-piel="bms"]) .pm-card-buy .pm-btn-add .pm-i{width:16px;height:16px}
/* Ya en el pedido: − · ✓ N en tu pedido · + en verde; «a confirmar» (más del tope: consulta) en azul */
:where(.pm[data-piel="bms"]) .pm-en-pedido{flex:1;min-width:0;height:42px;display:grid;grid-template-columns:36px minmax(0,1fr) 36px;align-items:center;
  border:2px solid var(--verde);border-radius:var(--r);color:var(--verde)}
:where(.pm[data-piel="bms"]) .pm-en-pedido-b{align-self:stretch;display:grid;place-items:center;color:inherit}
:where(.pm[data-piel="bms"]) .pm-en-pedido-b:hover:not(:disabled){background:#15803d14}
:where(.pm[data-piel="bms"]) .pm-en-pedido-b .pm-i{width:16px;height:16px}
:where(.pm[data-piel="bms"]) .pm-en-pedido-tx{min-width:0;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;color:inherit;line-height:1.05}
:where(.pm[data-piel="bms"]) .pm-en-pedido-tx b{display:inline-flex;align-items:center;gap:4px;font:800 17px/1 var(--f-tit);font-variant-numeric:tabular-nums}
:where(.pm[data-piel="bms"]) .pm-en-pedido-tx b .pm-i{width:14px;height:14px;stroke-width:2.6}
:where(.pm[data-piel="bms"]) .pm-en-pedido-tx small{max-width:100%;overflow:hidden;font:600 10.5px/1.15 var(--f-txt);white-space:nowrap;text-overflow:ellipsis}
:where(.pm[data-piel="bms"]) .pm-en-pedido-tx:hover small{text-decoration:underline;text-underline-offset:2px}
:where(.pm[data-piel="bms"]) .pm-en-pedido.is-consulta{border-color:var(--azul);color:var(--azul)}
:where(.pm[data-piel="bms"]) .pm-en-pedido.is-consulta .pm-en-pedido-b:hover:not(:disabled){background:#1d4ed814}

/* b) Kit de la piel (.card y sus piezas): tarjeta blanca, foto grande, logo en su color */
:where(.pm[data-piel="bms"]) .card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--blanco);color:var(--negro);
  border:1px solid var(--linea);border-radius:var(--r);transition:transform .18s,box-shadow .18s,border-color .18s}
:where(.pm[data-piel="bms"]) .card:hover{transform:translateY(-3px);box-shadow:0 14px 30px #00000022;border-color:var(--negro)}
:where(.pm[data-piel="bms"]) .card-foto{position:relative;display:block;width:100%;aspect-ratio:1/1;min-height:0;overflow:hidden;border-bottom:1px solid var(--linea)}
:where(.pm[data-piel="bms"]) .card-foto img{position:absolute;inset:16px;width:calc(100% - 32px);height:calc(100% - 32px);object-fit:contain}
:where(.pm[data-piel="bms"]) .card-foto .pm-sin-foto{position:absolute;inset:0}
:where(.pm[data-piel="bms"]) .card .off{position:absolute;left:10px;top:10px;z-index:2;padding:6px 8px;border-radius:var(--r);background:var(--negro);color:var(--blanco);font:900 17px/1 var(--f-tit)}
:where(.pm[data-piel="bms"]) .card .ya{position:absolute;right:10px;top:10px;z-index:2;display:flex;align-items:center;gap:4px;padding:6px 8px;border-radius:999px;
  background:var(--verde);color:#fff;font:700 11px/1 var(--f-txt)}
:where(.pm[data-piel="bms"]) .card .ya .pm-i{width:12px;height:12px;stroke-width:2.6}
:where(.pm[data-piel="bms"]) .card-cuerpo{display:flex;flex-direction:column;flex:1;gap:7px;min-width:0;padding:12px 14px 14px}
:where(.pm[data-piel="bms"]) .card .mlogo{width:70px;height:18px;-webkit-mask-position:left center;mask-position:left center}
:where(.pm[data-piel="bms"]) .card h3{min-height:2.6em;margin:0;font:600 14px/1.3 var(--f-txt)}
:where(.pm[data-piel="bms"]) .card h3 button{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:inherit;font:inherit;text-align:left;
  overflow-wrap:anywhere}
:where(.pm[data-piel="bms"]) .card h3 button:hover{text-decoration:underline;text-underline-offset:3px}
:where(.pm[data-piel="bms"]) .ent{display:inline-flex;align-items:center;gap:6px;font:700 12px/1.2 var(--f-txt)}
:where(.pm[data-piel="bms"]) .ent::before{content:"";width:8px;height:8px;flex:none;border-radius:50%;background:currentColor}
:where(.pm[data-piel="bms"]) .ent.inm{color:var(--verde)}
:where(.pm[data-piel="bms"]) .ent.dias{color:var(--azul)}
:where(.pm[data-piel="bms"]) .ent.cons{color:var(--gris)}
:where(.pm[data-piel="bms"]) .precio{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-variant-numeric:tabular-nums}
:where(.pm[data-piel="bms"]) .precio b{font:900 30px/1 var(--f-tit);white-space:nowrap}
:where(.pm[data-piel="bms"]) .precio s{font-size:13px;color:var(--gris)}
:where(.pm[data-piel="bms"]) .precio small{width:100%;font-size:12px;color:var(--gris)}
/* Tarjeta: los pesos, debajo de los dólares, se leen de un vistazo (oscuros y más grandes; el «+ IVA», en gris) */
:where(.pm[data-piel="bms"]) .card .precio small{font:600 15px/1.3 var(--f-txt);color:var(--negro-2)}
:where(.pm[data-piel="bms"]) .card .precio small span{white-space:nowrap}
:where(.pm[data-piel="bms"]) .card .precio small em{font-style:normal;font-weight:500;font-size:13px;color:var(--gris)}
:where(.pm[data-piel="bms"]) .iva-c{padding:4px 7px;border:1px solid var(--linea);border-radius:999px;font:700 11px/1 var(--f-txt);color:var(--gris);white-space:nowrap}
:where(.pm[data-piel="bms"]) .card .comprar{display:flex;gap:6px;margin-top:auto;padding-top:4px}
:where(.pm[data-piel="bms"]) .cant{display:flex;align-items:center;height:42px;border:1px solid var(--linea);border-radius:var(--r);background:var(--blanco)}
:where(.pm[data-piel="bms"]) .cant:focus-within{border-color:var(--negro)}
:where(.pm[data-piel="bms"]) .cant button{width:32px;align-self:stretch;display:grid;place-items:center;color:var(--gris)}
:where(.pm[data-piel="bms"]) .cant button:hover{color:var(--negro)}
:where(.pm[data-piel="bms"]) .cant input{width:30px;align-self:stretch;padding:0;border:0;outline:0;background:none;color:var(--negro);font:700 15px/1 var(--f-txt);text-align:center;
  -moz-appearance:textfield;appearance:textfield}
:where(.pm[data-piel="bms"]) .cant input::-webkit-inner-spin-button{-webkit-appearance:none}
:where(.pm[data-piel="bms"]) .agregar{flex:1;min-width:0;height:42px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--r);
  background:var(--negro);color:var(--blanco);font:800 15px/1 var(--f-tit);letter-spacing:.07em;text-transform:uppercase}
:where(.pm[data-piel="bms"]) .agregar:hover{background:#2c2c2c}
:where(.pm[data-piel="bms"]) .en-ped{flex:1;height:42px;display:flex;align-items:center;justify-content:center;gap:6px;border:2px solid var(--verde);border-radius:var(--r);
  color:var(--verde);font:700 13px/1 var(--f-txt)}
:where(.pm[data-piel="bms"]) .consultar{margin-top:auto;font-size:13px;color:var(--gris)}
/* Lo que suma la piel a la tarjeta del kit: «−N %» que no tapa el toque de la foto, «Antes» tachado en su renglón,
   «Consultar precio» y los logos que son solo un símbolo (con el nombre al lado, en el color de la marca) */
:where(.pm[data-piel="bms"]) .card .off{pointer-events:none}
/* Título: el recorte de dos renglones va en el texto (span) y el botón lo apoya arriba; con un solo renglón no queda
   flotando en el medio del toque de 44 px del celular */
:where(.pm[data-piel="bms"]) .card h3 button{display:flex;align-items:flex-start;width:100%;overflow:visible}
:where(.pm[data-piel="bms"]) .card h3 button>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-width:0;overflow:hidden;overflow-wrap:anywhere}
:where(.pm[data-piel="bms"]) .precio .precio-antes{width:100%;font-size:12px;color:var(--gris)}
:where(.pm[data-piel="bms"]) .precio .precio-antes s{font-size:13px;text-decoration-thickness:1.5px}
:where(.pm[data-piel="bms"]) .card .consultar{display:grid;gap:2px}
:where(.pm[data-piel="bms"]) .card .consultar b{font:800 19px/1.1 var(--f-tit);text-transform:uppercase;color:var(--negro)}
:where(.pm[data-piel="bms"]) .card .consultar span{font-size:12px}
:where(.pm[data-piel="bms"]) .card .pm-config-chip{margin-top:2px}
/* Logos (el mismo ayudante de piel.js para tarjetas, cinta y ficha): el oficial a color (img.logo-color, de bms/logos/;
   --alto = el alto que le queda bien en la cinta y la ficha), la máscara en el color de la marca o el nombre */
:where(.pm[data-piel="bms"]) .logo-color{display:block;width:auto;max-width:100%;object-fit:contain}
:where(.pm[data-piel="bms"]) .marca-tx{display:block;min-width:0;overflow:hidden;font:700 11px/1 var(--f-txt);letter-spacing:.14em;text-transform:uppercase;color:var(--gris);
  white-space:nowrap;text-overflow:ellipsis}
:where(.pm[data-piel="bms"]) .mlogo-combo{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%}
:where(.pm[data-piel="bms"]) .mlogo-combo .mlogo{width:22px;height:22px;flex:none;-webkit-mask-position:center;mask-position:center}
:where(.pm[data-piel="bms"]) .mlogo-tx{min-width:0;overflow:hidden;font:900 15px/1 var(--f-tit);letter-spacing:.03em;color:var(--c,#111);white-space:nowrap;text-overflow:ellipsis}
/* En la tarjeta, el logo va chiquito y delicado en el ángulo inferior izquierdo de la foto, arriba de la línea: no
   ocupa un renglón y no se lleva el toque de la foto. Sobre las fotos (fondo blanco) un respaldo blanco casi invisible. */
:where(.pm[data-piel="bms"]) .card-media{position:relative}
:where(.pm[data-piel="bms"]) .card-media .pm-card-marca{position:absolute;left:9px;bottom:9px;z-index:2;display:flex;align-items:center;gap:0;height:auto;min-height:0;
  max-width:min(84px,calc(100% - 18px));padding:3px 5px;border-radius:3px;background:rgba(255,255,255,.88);pointer-events:none}
:where(.pm[data-piel="bms"]) .card-media .pm-card-marca.is-vacia{display:none}
:where(.pm[data-piel="bms"]) .card-media .pm-card-marca .logo-color{height:clamp(12px,calc(var(--alto,28px)*.58),18px);max-width:72px}
:where(.pm[data-piel="bms"]) .card-media .pm-card-marca .mlogo{width:60px;max-width:100%;height:14px;-webkit-mask-position:left center;mask-position:left center}
:where(.pm[data-piel="bms"]) .card-media .pm-card-marca .mlogo-combo{gap:4px}
:where(.pm[data-piel="bms"]) .card-media .pm-card-marca .mlogo-combo .mlogo{width:14px;height:14px}
:where(.pm[data-piel="bms"]) .card-media .pm-card-marca .mlogo-combo .mlogo-tx{font:900 12px/1 var(--f-tit);letter-spacing:.03em;text-transform:none;color:var(--c,#111)}
:where(.pm[data-piel="bms"]) .card-media .pm-card-marca .marca-tx{max-width:72px;font-size:9.5px;letter-spacing:.12em}

/* ═══ 10. Mis pedidos ════════════════════════════════════════════════════════════════════════════════════════════ */
.peds-env{padding-top:18px}
.orden{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.peds{display:grid;gap:10px}
/* a) Las de portal.js (.pm-sol): fotos, número y fecha, estado en color, total y PDF · Ver · Repetir */
:where(.pm[data-piel="bms"]) .pm-sol{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);transition:border-color .18s}
:where(.pm[data-piel="bms"]) .pm-sol:hover{border-color:var(--negro)}
:where(.pm[data-piel="bms"]) .pm-sol-in{display:grid;grid-template-columns:minmax(150px,1fr) auto minmax(0,1.3fr) auto auto;align-items:center;gap:16px;padding:14px 16px}
:where(.pm[data-piel="bms"]) .pm-sol-num{display:flex;flex-direction:column;gap:3px;min-width:0}
:where(.pm[data-piel="bms"]) .pm-sol-num b{font:900 22px/1 var(--f-tit);overflow-wrap:anywhere}
:where(.pm[data-piel="bms"]) .pm-sol-num small{font-size:13px;color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-sol-prods{display:flex;align-items:center;gap:12px;min-width:0}
:where(.pm[data-piel="bms"]) .pm-sol-prods small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-sol-prods small b{color:var(--negro);font-weight:600}
:where(.pm[data-piel="bms"]) .pm-sol-fotos{display:flex;flex:none}
:where(.pm[data-piel="bms"]) .pm-sol-fotos span{width:46px;height:46px;display:grid;place-items:center;overflow:hidden;padding:4px;border:1px solid var(--linea);
  border-radius:50%;background:var(--blanco);color:#b6b6b1}
:where(.pm[data-piel="bms"]) .pm-sol-fotos span+span{margin-left:-12px}
:where(.pm[data-piel="bms"]) .pm-sol-fotos img{max-width:100%;max-height:100%;object-fit:contain}
:where(.pm[data-piel="bms"]) .pm-sol-total{text-align:right}
:where(.pm[data-piel="bms"]) .pm-sol-total b{display:block;font:900 20px/1.05 var(--f-tit);font-variant-numeric:tabular-nums;white-space:nowrap}
:where(.pm[data-piel="bms"]) .pm-sol-total small{font-size:12px;color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-sol-acc{display:flex;gap:6px}
:where(.pm[data-piel="bms"]) .pm-sol-in>.pm-estado{justify-self:start}
/* Estado en color (también lo usa la piel con estadoHTML) */
:where(.pm[data-piel="bms"]) .pm-estado{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;font:700 12px/1 var(--f-txt);white-space:nowrap}
:where(.pm[data-piel="bms"]) .pm-estado.e-revision{background:#dbeafe;color:#1e40af}
:where(.pm[data-piel="bms"]) :is(.pm-estado.e-enviado,.pm-estado.e-ok){background:#dcfce7;color:#166534}
:where(.pm[data-piel="bms"]) .pm-estado.e-fin{background:#ececea;color:#3f3f44}
:where(.pm[data-piel="bms"]) .pm-estado.e-gris{background:#f1f1ef;color:#77777c}
/* b) Kit de la piel (.ped) */
:where(.pm[data-piel="bms"]) .ped{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:18px;padding:14px 16px;background:var(--blanco);
  border:1px solid var(--linea);border-radius:var(--r)}
:where(.pm[data-piel="bms"]) .ped-fotos{display:flex;flex:none;width:114px}      /* 3 fotos de 46 encimadas: las filas se alinean */
:where(.pm[data-piel="bms"]) .ped-fotos img{width:46px;height:46px;padding:4px;object-fit:contain;border:1px solid var(--linea);border-radius:50%;background:var(--blanco)}
:where(.pm[data-piel="bms"]) .ped-fotos img+img{margin-left:-12px}
:where(.pm[data-piel="bms"]) .ped b{display:block;overflow:hidden;font:900 22px/1.1 var(--f-tit);white-space:nowrap;text-overflow:ellipsis}   /* el número, entero en un renglón */
:where(.pm[data-piel="bms"]) .ped small{display:block;margin-top:3px;font-size:13px;color:var(--gris)}
:where(.pm[data-piel="bms"]) .estado{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;font:700 12px/1 var(--f-txt);white-space:nowrap}
:where(.pm[data-piel="bms"]) .estado.rev{background:#dbeafe;color:#1e40af}
:where(.pm[data-piel="bms"]) .estado.ok{background:#dcfce7;color:#166534}
:where(.pm[data-piel="bms"]) .estado.cer{background:#ececea;color:#4b4b50}
:where(.pm[data-piel="bms"]) .ped-acc{display:flex;gap:6px}
:where(.pm[data-piel="bms"]) .ped-tx{min-width:0}
:where(.pm[data-piel="bms"]) .ped>.pm-estado{justify-self:start}
:where(.pm[data-piel="bms"]) .ped-fotos .ped-sinfoto{width:46px;height:46px;display:grid;place-items:center;padding:4px;border:1px solid var(--linea);border-radius:50%;
  background:var(--blanco);color:#b6b6b1}
:where(.pm[data-piel="bms"]) .ped-fotos .ped-sinfoto .pm-i{width:20px;height:20px}
:where(.pm[data-piel="bms"]) .ped-fotos .ped-sinfoto+*,:where(.pm[data-piel="bms"]) .ped-fotos img+.ped-sinfoto{margin-left:-12px}

/* ═══ 11. Tu pedido: panel al costado (en el celular, hoja de abajo) ════════════════════════════════════════════ */
/* Con el panel abierto la página de atrás no se desplaza (piel.js pone html.sin-scroll y compensa la barra). El body
   vuelve a overflow visible: si quedara como contenedor de desplazamiento, la cabecera fija se iría con la página. */
html.sin-scroll{overflow:hidden}
html.sin-scroll body.pm[data-piel="bms"]{overflow:visible}
.velo{position:fixed;inset:0;z-index:50;background:#0009}
.panel{position:fixed;z-index:51;top:0;right:0;bottom:0;width:min(420px,100%);display:flex;flex-direction:column;background:var(--blanco);color:var(--negro);
  box-shadow:-20px 0 50px #0005;padding-top:env(safe-area-inset-top,0px);padding-right:env(safe-area-inset-right,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  animation:bms-desliza .25s ease-out}
.pan-cab{flex:none;display:flex;align-items:center;gap:10px;padding:14px 18px;background:var(--negro);color:var(--blanco)}
.pan-cab>div{min-width:0}
.pan-cab h2{font-size:30px;font-weight:900}
.pan-sub{display:block;margin-top:4px;overflow:hidden;color:var(--gris-n);font-size:13px;white-space:nowrap;text-overflow:ellipsis}
.pan-lista::before,.pan-estado::before{content:" · "}
.cerrar{flex:none;margin-left:auto;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;color:var(--blanco)}
.cerrar:hover{background:#ffffff1a}
/* Los renglones nunca se quedan sin lugar: la lista mide al menos 132 px y, si la pantalla es más baja que todo junto
   (1166 × 554 con el pie de totales, o con el aviso de «Estás modificando…»), se desliza el cuerpo entero del panel. */
.pedido{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
.editando{flex:none;display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 10px;margin:12px 18px 0;padding:10px 12px;border:1px solid var(--negro);border-left-width:4px;
  border-radius:var(--r);background:var(--papel)}
.editando>.pm-i{width:20px;height:20px;margin-top:1px}
.editando-tx{flex:1 1 200px;min-width:0}
.editando-tx b{display:block;font:800 16px/1.15 var(--f-tit);text-transform:uppercase;overflow-wrap:anywhere}
.editando-tx small{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;color:var(--gris)}
.editando .mini{margin-left:auto}
.pedido-estado{flex:1;min-height:0;overflow-y:auto}
.editor{flex:1 1 auto;display:flex;flex-direction:column}
.panel .pm-addbar{position:relative;flex:none;padding:10px 18px 8px;border-bottom:1px solid var(--linea)}
.buscar-add{width:100%;height:42px}
.sug{position:absolute;left:18px;right:18px;top:calc(100% - 6px);z-index:5;max-height:min(360px,52vh);overflow-y:auto;padding:4px;border:1px solid var(--negro);
  border-radius:var(--r);background:var(--blanco);box-shadow:0 18px 40px #0003}
:where(.pm[data-piel="bms"]) .pm-sug-it{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--r);cursor:pointer}
:where(.pm[data-piel="bms"]) :is(.pm-sug-it.is-activo,.pm-sug-it:hover){background:var(--papel)}
:where(.pm[data-piel="bms"]) .pm-sug-ft{width:44px;height:44px;display:grid;place-items:center;overflow:hidden;padding:3px;border:1px solid var(--linea);border-radius:var(--r);background:var(--blanco)}
:where(.pm[data-piel="bms"]) .pm-sug-ft img{max-width:100%;max-height:100%;object-fit:contain}
:where(.pm[data-piel="bms"]) .pm-sug-ft .pm-i{width:22px;height:22px}
:where(.pm[data-piel="bms"]) .pm-sug-tx{min-width:0}
:where(.pm[data-piel="bms"]) .pm-sug-tx b{display:block;overflow:hidden;font-size:13px;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
:where(.pm[data-piel="bms"]) .pm-sug-tx small{display:block;overflow:hidden;font-size:11.5px;color:var(--gris);white-space:nowrap;text-overflow:ellipsis}
:where(.pm[data-piel="bms"]) .pm-sug-pr{font:800 15px/1.1 var(--f-tit);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
:where(.pm[data-piel="bms"]) .pm-sug-pr em{font:600 10.5px var(--f-txt);font-style:normal;color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-sug-pr small{display:block;font:700 10px/1.3 var(--f-txt);letter-spacing:.08em;text-transform:uppercase}
:where(.pm[data-piel="bms"]) .pm-sug-msg{padding:14px;color:var(--gris);font-size:13px;text-align:center}
/* height:0 + min-height: la lista no aporta su alto entero al mínimo del panel (sí sus 132 px) y crece con flex */
.lineas{flex:1 1 0;height:0;min-height:132px;overflow-y:auto;overscroll-behavior:contain}
/* a) Renglones de portal.js (.pm-reng): foto y nombre arriba; cantidad · precio unitario · subtotal abajo */
:where(.pm[data-piel="bms"]) .pm-reng{padding:10px 18px;border-bottom:1px solid var(--linea)}
:where(.pm[data-piel="bms"]) .pm-reng-in{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"prod prod prod" "cant pu sub";
  align-items:center;gap:6px 12px}
:where(.pm[data-piel="bms"]) .pm-reng-prod{grid-area:prod;display:flex;align-items:flex-start;gap:12px;min-width:0;padding-right:34px}
:where(.pm[data-piel="bms"]) .pm-reng-ft{width:56px;height:56px;flex:none;display:grid;place-items:center;overflow:hidden;padding:4px;border:1px solid var(--linea);
  border-radius:var(--r);background:var(--blanco);color:#b6b6b1}
:where(.pm[data-piel="bms"]) .pm-reng-ft img{max-width:100%;max-height:100%;object-fit:contain}
:where(.pm[data-piel="bms"]) .pm-reng-ft .pm-i{width:26px;height:26px}
:where(.pm[data-piel="bms"]) .pm-reng-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
:where(.pm[data-piel="bms"]) .pm-reng-tx b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
:where(.pm[data-piel="bms"]) .pm-reng-tx small{font-size:12px;color:var(--gris);overflow-wrap:anywhere}
:where(.pm[data-piel="bms"]) .pm-reng-ent{display:flex;flex-wrap:wrap;gap:2px 10px}
:where(.pm[data-piel="bms"]) .pm-reng-ent .pm-ent{font-size:11.5px}
:where(.pm[data-piel="bms"]) .pm-reng-err{font-size:12px;font-weight:600;color:var(--rojo)}
:where(.pm[data-piel="bms"]) .pm-reng-cant{grid-area:cant}
:where(.pm[data-piel="bms"]) .pm-reng-cant .pm-step{height:34px}
:where(.pm[data-piel="bms"]) .pm-reng-sub{grid-area:sub;text-align:right}
:where(.pm[data-piel="bms"]) .pm-reng-sub .pm-pr{justify-content:flex-end}
:where(.pm[data-piel="bms"]) .pm-reng-sub .pm-pr b,:where(.pm[data-piel="bms"]) .pm-reng-sub>b{font:900 20px/1 var(--f-tit)}
:where(.pm[data-piel="bms"]) .pm-reng-pu{grid-area:pu;display:flex;flex-direction:column;gap:1px;min-width:0;font-size:12px;color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-reng.is-consulta .pm-reng-pu{visibility:hidden}   /* «A confirmar» ya va en el subtotal */
:where(.pm[data-piel="bms"]) .pm-reng-pu .pm-pr b{font:500 12px/1.3 var(--f-txt);color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-reng-pu .pm-pr em{font-size:11px;font-weight:500}
:where(.pm[data-piel="bms"]) .pm-reng-pu small{font-size:12px}
:where(.pm[data-piel="bms"]) .pm-x{position:absolute;top:0;right:0;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-x:hover:not(:disabled){color:var(--rojo);background:#b91c1c12}
:where(.pm[data-piel="bms"]) .pm-x .pm-i{width:16px;height:16px}
:where(.pm[data-piel="bms"]) .pm-reng.is-error{box-shadow:inset 3px 0 0 var(--rojo)}
:where(.pm[data-piel="bms"]) .pm-reng.is-consulta{box-shadow:inset 3px 0 0 var(--azul)}
:where(.pm[data-piel="bms"]) .pm-reng-consulta{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 6px;border-radius:999px;
  background:#dbeafe;color:#1e40af;font-size:11.5px;font-weight:600}
:where(.pm[data-piel="bms"]) .pm-reng-consulta .pm-i{width:13px;height:13px}
:where(.pm[data-piel="bms"]) .pm-reng-aconf{font:700 13px/1.2 var(--f-txt);color:var(--azul);white-space:nowrap}
/* b) Kit de la piel (.lin) */
.lineas .lin{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;padding:14px 18px;border-bottom:1px solid var(--linea)}
.lineas .lin img{width:64px;height:64px;object-fit:contain;border:1px solid var(--linea);border-radius:var(--r)}
.lineas .lin-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.lineas .lin-q{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:8px}
.lineas .lin-q :is(.cant,.pm-step,.quitar){flex:none}                      /* si no entra, el precio baja; nada se achica */
.lineas .lin-q :is(.cant,.pm-step){height:34px}
.lineas .lin-q b{margin-left:auto;font:900 20px/1 var(--f-tit);white-space:nowrap}
.lineas .quitar{width:32px;height:32px;display:grid;place-items:center;color:var(--gris)}
.lineas .quitar:hover{color:var(--rojo)}
.lineas .vacio{padding:30px 18px;color:var(--gris)}
/* Lo que suma la piel al renglón: foto en su cuadro, código y entrega, consulta «a confirmar» (azul) o el motivo del
   error (rojo), el subtotal + IVA de la revisión del servidor y el precio por unidad abajo */
.lineas .lin-ft{width:64px;height:64px;display:grid;place-items:center;overflow:hidden;padding:4px;border:1px solid var(--linea);border-radius:var(--r);
  background:var(--blanco);color:#b6b6b1}
.lineas .lin-ft img{width:100%;height:100%;object-fit:contain;border:0;border-radius:0}
.lineas .lin-ft .pm-i{width:26px;height:26px}
.lineas .lin-cu{display:flex;flex-direction:column;gap:3px;min-width:0}
.lineas .lin-cod{font-size:12px;color:var(--gris);overflow-wrap:anywhere}
.lineas .lin .ent{font-size:11.5px}
.lineas .lin-aviso{align-self:flex-start;display:inline-flex;padding:3px 8px;border-radius:999px;background:#dbeafe;color:#1e40af;font-size:11.5px;font-weight:600}
.lineas .lin-err{font-size:12px;font-weight:600;color:var(--rojo)}
.lineas .lin-q b em{font:600 11px/1 var(--f-txt);font-style:normal;color:var(--gris)}
.lineas .lin-q b.lin-aconf{font:700 13px/1.2 var(--f-txt);color:var(--azul)}
.lineas .lin-q b.lin-calc{font:600 13px/1.2 var(--f-txt);color:var(--gris)}
.lineas .lin-pu{font-size:12px;color:var(--gris);font-variant-numeric:tabular-nums}
/* Renglón compacto (entran varios en una pantalla baja): foto chica; título; cantidad · quitar · subtotal; y una línea
   chica con la entrega (o la consulta, o el motivo del error), el precio por unidad y el «antes» de una oferta. Si no
   entra, se acortan con «…» la entrega y el «antes» (los dos están en la ficha); el precio por unidad nunca se corta */
.lineas .lin{grid-template-columns:48px minmax(0,1fr);gap:10px;padding:10px 18px}
.lineas .lin-ft{width:48px;height:48px;padding:3px}
.lineas .lin-cu{gap:4px}
.lineas .lin .lin-q{margin-top:0}
.lineas .lin-meta{display:flex;align-items:baseline;gap:2px 8px;overflow:hidden;font-size:12px;line-height:1.35;color:var(--gris);white-space:nowrap}
.lineas .lin-meta>*{min-width:0;overflow:hidden;text-overflow:ellipsis}
.lineas .lin-meta>.lin-pu{flex:none;overflow:visible}
.lineas .lin-meta .ent{display:block}                                  /* en bloque, para que el «…» funcione */
.lineas .lin-meta .ent::before{display:inline-block;margin-right:6px;vertical-align:1px}
.lineas .lin-meta .lin-aviso{display:block;padding:1px 7px}
.lineas .lin.is-error .lin-meta{flex-wrap:wrap;white-space:normal}
.lineas .lin.is-error{box-shadow:inset 3px 0 0 var(--rojo)}
.lineas .lin.is-consulta{box-shadow:inset 3px 0 0 var(--azul)}
/* Pie del panel: total, nota, «Pedir presupuesto» y «Vaciar pedido» */
.pan-pie{flex:none;display:grid;gap:8px;padding:12px 18px 14px;border-top:1px solid var(--linea);background:var(--papel)}
/* Totales (los arma portal.js): productos y unidades arriba; Neto e IVA chicos a la izquierda y el TOTAL grande a la derecha */
.tot{display:grid;gap:6px}
.tot.is-calculando .pm-tot-der{opacity:.45}
:where(.pm[data-piel="bms"]) .pm-tot-izq{display:flex;flex-direction:column;font-size:12px;line-height:1.4;color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-tot-izq b{color:var(--negro);font-weight:600}
:where(.pm[data-piel="bms"]) .pm-tot-der{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"neto total" "iva total";align-items:end;gap:2px 14px}
:where(.pm[data-piel="bms"]) .pm-tot-it{display:flex;align-items:baseline;gap:6px;min-width:0}
:where(.pm[data-piel="bms"]) .pm-tot-it:first-child{grid-area:neto}
:where(.pm[data-piel="bms"]) .pm-tot-it.iva{grid-area:iva}
:where(.pm[data-piel="bms"]) .pm-tot-it small{font:700 10.5px/1 var(--f-txt);letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-tot-it span{font:600 13px/1.2 var(--f-txt);font-variant-numeric:tabular-nums;white-space:nowrap}
:where(.pm[data-piel="bms"]) .pm-tot-it.total{grid-area:total;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
:where(.pm[data-piel="bms"]) .pm-tot-it.total small{color:var(--negro)}
:where(.pm[data-piel="bms"]) .pm-tot-it.total span{font:900 30px/1 var(--f-tit)}
:where(.pm[data-piel="bms"]) .pm-tot-it.total em{font-style:normal;font-size:12px;font-weight:600;color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-tot-it.total em.pm-tot-conf{display:block;max-width:230px;color:var(--azul);font-size:11.5px;line-height:1.3}
.nota textarea{display:block;width:100%;height:40px;min-height:40px;padding:9px 11px;border:1px solid var(--linea);border-radius:var(--r);background:var(--blanco);
  color:var(--negro);font-size:16px;line-height:1.35;resize:vertical}
.nota textarea:focus{outline:0;border-color:var(--negro);box-shadow:0 0 0 1px var(--negro)}
.nota textarea::placeholder{color:#8e8e93;opacity:1}
.pan-acc{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px}
.pan-acc .btn{grid-column:1/-1;width:100%}
.pan-acc p{margin:0;font-size:12px;color:var(--gris)}
.vaciar{min-height:28px;font-size:13px;color:var(--gris);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.vaciar:hover:not(:disabled){color:var(--rojo)}
.vaciar:disabled{opacity:.5}
/* Pedido vacío y pedido recibido */
:where(.pm[data-piel="bms"]) :is(.pm-vacio,.pm-ok){display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 22px 30px;text-align:center}
:where(.pm[data-piel="bms"]) :is(.pm-vacio-ico,.pm-ok-ico){width:76px;height:76px;display:grid;place-items:center;margin-bottom:4px;border-radius:50%;background:var(--papel);color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-vacio-ico .pm-i{width:32px;height:32px}
:where(.pm[data-piel="bms"]) .pm-ok-ico{background:var(--verde);color:#fff}
:where(.pm[data-piel="bms"]) .pm-ok-ico .pm-i{width:36px;height:36px;stroke-width:2.6}
:where(.pm[data-piel="bms"]) :is(.pm-vacio,.pm-ok) h2{font:900 28px/1 var(--f-tit);text-transform:uppercase;text-wrap:balance}
:where(.pm[data-piel="bms"]) :is(.pm-vacio,.pm-ok) p{max-width:420px;color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-ok-num{padding:6px 12px;border:1px solid var(--linea);border-radius:999px;font:800 15px/1 var(--f-tit);letter-spacing:.04em;overflow-wrap:anywhere}
:where(.pm[data-piel="bms"]) .pm-ok-total{font:900 34px/1.05 var(--f-tit);font-variant-numeric:tabular-nums}
:where(.pm[data-piel="bms"]) .pm-ok-acc{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px}
.panel :is(.pm-ok-acc,.pm-vacio) .pm-btn{width:100%}

/* ═══ 12. Carteles: ficha del producto, consulta de más unidades y detalle del pedido ═════════════════════════════ */
:where(.pm[data-piel="bms"]) .pm-dialog{width:min(720px,calc(100vw - 32px));max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);padding:0;overflow:hidden;
  border:0;border-radius:var(--r);background:var(--blanco);color:var(--negro);box-shadow:0 30px 80px #0007}
:where(.pm[data-piel="bms"]) .pm-dialog[open]{display:flex;flex-direction:column;animation:bms-aparece .22s ease-out}
:where(.pm[data-piel="bms"]) .pm-dialog::backdrop{background:rgba(0,0,0,.6)}
:where(.pm[data-piel="bms"]) .pm-close{position:relative;z-index:2;width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--papel);color:var(--negro)}
:where(.pm[data-piel="bms"]) .pm-close:hover{background:var(--linea)}
:where(.pm[data-piel="bms"]) :is(.pm-quick,.pm-consulta)>.pm-close{position:absolute;top:10px;right:10px}
/* Ficha (#pm-quick): de tamaño fijo y en dos columnas (foto | datos) */
:where(.pm[data-piel="bms"]) .pm-quick{width:min(980px,calc(100vw - 32px));height:min(640px,calc(100vh - 28px));height:min(640px,calc(100dvh - 28px))}
:where(.pm[data-piel="bms"]) .pm-quick-in{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
:where(.pm[data-piel="bms"]) .pm-quick-foto{position:relative;min-height:0;overflow:hidden;border-right:1px solid var(--linea);background:var(--blanco)}
:where(.pm[data-piel="bms"]) .pm-quick-foto img{position:absolute;inset:28px;width:calc(100% - 56px);height:calc(100% - 56px);object-fit:contain}
:where(.pm[data-piel="bms"]) .pm-quick-foto .pm-sin-foto{position:absolute;inset:0}
:where(.pm[data-piel="bms"]) .pm-quick-info{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0;overflow-y:auto;padding:20px 24px 18px}
:where(.pm[data-piel="bms"]) .pm-quick-marca{align-self:flex-start;display:flex;align-items:center;min-height:28px;color:var(--bc,var(--negro))}
:where(.pm[data-piel="bms"]) .pm-quick-marca[style*="--bc:#ffffff" i]{color:var(--negro)}
:where(.pm[data-piel="bms"]) .pm-quick-marca>.pm-logo{width:110px;height:28px;-webkit-mask-position:left center;mask-position:left center}
:where(.pm[data-piel="bms"]) .pm-quick-info h2{margin:0;padding-right:40px;font:700 21px/1.25 var(--f-txt);overflow-wrap:anywhere}
:where(.pm[data-piel="bms"]) .pm-quick-datos{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
:where(.pm[data-piel="bms"]) .pm-quick-precio{display:grid;gap:6px;padding:12px 14px;border-radius:var(--r);background:var(--papel)}
:where(.pm[data-piel="bms"]) .pm-quick-pr{display:flex;flex-direction:column;gap:3px}
:where(.pm[data-piel="bms"]) .pm-quick-pr .pm-pr.is-usd b{font-size:34px}
:where(.pm[data-piel="bms"]) .pm-quick-precio>small{font-size:13px;color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-quick-buy{display:flex;align-items:center;gap:8px}
:where(.pm[data-piel="bms"]) .pm-quick-buy :is(.pm-step,.pm-btn-add,.pm-en-pedido){height:46px}
:where(.pm[data-piel="bms"]) .pm-quick-buy .pm-btn-add{flex:1}
:where(.pm[data-piel="bms"]) .pm-quick-nota{margin-top:auto;font-size:12px;line-height:1.5;color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-quick-info>.pm-state{padding:24px 0;align-items:flex-start;text-align:left}
/* Notebooks: «Memoria» y «Disco» a elección dentro de la misma ficha (configurador de portal.js) */
:where(.pm[data-piel="bms"]) .pm-cfg-tit{display:block;font:700 11px/1 var(--f-txt);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-cfg-ops{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
:where(.pm[data-piel="bms"]) .pm-cfg-op{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:96px;padding:8px 12px;border:1px solid var(--linea);
  border-radius:var(--r);background:var(--blanco);color:var(--negro);text-align:left}
:where(.pm[data-piel="bms"]) .pm-cfg-op b{font:800 17px/1 var(--f-tit)}
:where(.pm[data-piel="bms"]) .pm-cfg-op small{font-size:11.5px;color:var(--gris);font-variant-numeric:tabular-nums}
:where(.pm[data-piel="bms"]) .pm-cfg-op:hover:not(:disabled){border-color:var(--negro)}
:where(.pm[data-piel="bms"]) .pm-cfg-op.is-on{border-color:var(--negro);background:var(--papel);box-shadow:inset 0 0 0 1px var(--negro)}
:where(.pm[data-piel="bms"]) .pm-cfg-op:disabled{opacity:.4}
:where(.pm[data-piel="bms"]) .pm-cfg-lista .pm-cfg-ops{flex-direction:column}
:where(.pm[data-piel="bms"]) .pm-cfg-lista .pm-cfg-op{width:100%;flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
:where(.pm[data-piel="bms"]) .pm-cfg-lista .pm-cfg-op b{font:600 13.5px/1.3 var(--f-txt)}
:where(.pm[data-piel="bms"]) .pm-cfg-elegida{display:block;font-size:12px;color:var(--gris)}
/* Kit de la ficha de la piel: galería con flechas y miniaturas | datos, IVA bien claro, «Agregar» siempre a la vista */
:where(.pm[data-piel="bms"]) .pm-quick .galeria{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px;min-height:0;padding:18px;border-right:1px solid var(--linea)}
:where(.pm[data-piel="bms"]) .pm-quick .gal-main{position:relative;display:grid;place-items:center;height:100%;min-height:0;overflow:hidden}
:where(.pm[data-piel="bms"]) .pm-quick .gal-main img{max-width:100%;max-height:100%;object-fit:contain}
:where(.pm[data-piel="bms"]) .pm-quick .gal-fl{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--linea);
  border-radius:50%;background:var(--blanco);box-shadow:0 4px 12px #0002}
:where(.pm[data-piel="bms"]) .pm-quick .gal-fl:hover{border-color:var(--negro)}
:where(.pm[data-piel="bms"]) .pm-quick .gal-fl.izq{left:0}
:where(.pm[data-piel="bms"]) .pm-quick .gal-fl.der{right:0}
:where(.pm[data-piel="bms"]) .pm-quick .gal-fl.izq .pm-i{transform:scaleX(-1)}
:where(.pm[data-piel="bms"]) .pm-quick .gal-n{position:absolute;left:0;bottom:0;padding:5px 8px;border-radius:999px;background:var(--negro);color:var(--blanco);font:700 12px/1 var(--f-txt)}
:where(.pm[data-piel="bms"]) .pm-quick .gal-tira{display:flex;gap:8px;overflow-x:auto;padding:2px}
:where(.pm[data-piel="bms"]) .pm-quick .gal-tira button{flex:none;width:62px;height:62px;padding:4px;border:1px solid var(--linea);border-radius:var(--r);background:var(--blanco)}
:where(.pm[data-piel="bms"]) .pm-quick .gal-tira button[aria-current="true"]{border:2px solid var(--negro)}
:where(.pm[data-piel="bms"]) .pm-quick .gal-tira img{width:100%;height:100%;object-fit:contain}
:where(.pm[data-piel="bms"]) .pm-quick .fi-der{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;min-width:0}
:where(.pm[data-piel="bms"]) .pm-quick .fi-info{display:grid;align-content:start;gap:12px;min-height:0;overflow-y:auto;padding:20px 24px 16px}
:where(.pm[data-piel="bms"]) .pm-quick .fi-info h2{margin:0;padding-right:34px;font:700 21px/1.25 var(--f-txt);overflow-wrap:anywhere}
:where(.pm[data-piel="bms"]) .pm-quick .fi-precio{display:grid;gap:6px;padding:12px 14px;border-radius:var(--r);background:var(--papel)}
:where(.pm[data-piel="bms"]) .pm-quick .fi-precio .precio b{font-size:34px}
:where(.pm[data-piel="bms"]) .pm-quick .iva{display:inline-flex;align-items:center;gap:6px;width:max-content;padding:6px 9px;border-radius:999px;background:var(--negro);color:var(--blanco);font:700 12px/1 var(--f-txt)}
:where(.pm[data-piel="bms"]) .pm-quick .iva-l{font-size:14px;color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-quick .iva-l :is(strong,b){color:var(--negro);font-weight:800}
:where(.pm[data-piel="bms"]) .pm-quick .fi-precio .precio .iva{align-self:center}
/* El «−N %» al lado del precio: el cuadradito negro de las tarjetas, distinto de la pastilla del IVA */
:where(.pm[data-piel="bms"]) .pm-quick .fi-precio .fi-off{align-self:center;padding:5px 8px;border-radius:var(--r);background:var(--negro);color:var(--blanco);font:900 18px/1 var(--f-tit)}
:where(.pm[data-piel="bms"]) .pm-quick .fi-tabla{display:grid;grid-template-columns:minmax(110px,auto) 1fr;margin:0;border-top:1px solid var(--linea);font-size:14px}
:where(.pm[data-piel="bms"]) .pm-quick .fi-tabla :is(dt,dd){margin:0;padding:8px 0;border-bottom:1px solid var(--linea);overflow-wrap:anywhere}
:where(.pm[data-piel="bms"]) .pm-quick .fi-tabla dt{padding-right:14px;color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-quick .fi-sec{margin:6px 0 0;font:800 18px/1 var(--f-tit);letter-spacing:.04em;text-transform:uppercase}
:where(.pm[data-piel="bms"]) .pm-quick .fi-desc{margin:0;color:#2c2c2e;font-size:14px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
:where(.pm[data-piel="bms"]) .pm-quick .fi-desc.corta{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
:where(.pm[data-piel="bms"]) .pm-quick .fi-mas{justify-self:start;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
:where(.pm[data-piel="bms"]) .pm-quick .fi-compra{display:flex;align-items:center;gap:8px;padding:12px 24px;border-top:1px solid var(--linea);background:var(--blanco)}
:where(.pm[data-piel="bms"]) .pm-quick .fi-compra :is(.agregar,.cant,.pm-step,.pm-btn-add,.pm-en-pedido){height:46px}
:where(.pm[data-piel="bms"]) .pm-quick .fi-compra :is(.agregar,.pm-btn-add,.pm-en-pedido){flex:1}
/* Lo que suma la piel a la ficha: la foto grande en su caja (se cambia al pasar), el logo a la izquierda, el aviso
   mientras llega la ficha técnica, la nota del pie y «Ver más» con lugar para el dedo */
:where(.pm[data-piel="bms"]) .pm-quick .gal-foto{width:100%;height:100%;min-height:0;display:grid;place-items:center}
/* La foto grande entra ENTERA en su caja, sea cuadrada, apaisada o alta (una foto vertical no se corta abajo): la caja
   tiene filas y columnas de tamaño fijo y la foto la ocupa toda, achicada con object-fit */
:where(.pm[data-piel="bms"]) .pm-quick .gal-main{grid-template:minmax(0,1fr)/minmax(0,1fr)}
:where(.pm[data-piel="bms"]) .pm-quick .gal-foto{position:relative}
:where(.pm[data-piel="bms"]) .pm-quick .gal-foto img{position:absolute;inset:0;width:100%;height:100%}
:where(.pm[data-piel="bms"]) .pm-quick .gal-foto .pm-sin-foto{width:100%;height:100%}
:where(.pm[data-piel="bms"]) .pm-quick .gal-tira .pm-sin-foto .pm-i{width:22px;height:22px}
:where(.pm[data-piel="bms"]) .pm-quick .fi-marca{display:flex;align-items:center;min-height:28px;min-width:0}
:where(.pm[data-piel="bms"]) .pm-quick .fi-marca:empty{display:none}
:where(.pm[data-piel="bms"]) .pm-quick .fi-marca .logo-color{height:clamp(20px,var(--alto,28px),40px);max-width:160px}
:where(.pm[data-piel="bms"]) .pm-quick .fi-marca>.mlogo{width:110px;height:28px;-webkit-mask-position:left center;mask-position:left center}
:where(.pm[data-piel="bms"]) .pm-quick .fi-marca .mlogo-combo .mlogo{width:26px;height:26px}
:where(.pm[data-piel="bms"]) .pm-quick .fi-marca .mlogo-combo .mlogo-tx{font-size:20px}
/* Fila «Marca» de la tabla: el logo chico y el nombre al lado */
:where(.pm[data-piel="bms"]) .pm-quick .fi-marca-fila{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;vertical-align:middle}
:where(.pm[data-piel="bms"]) .pm-quick .fi-marca-fila .logo-color{height:clamp(14px,calc(var(--alto,28px)*.7),22px);max-width:96px;flex:none}
:where(.pm[data-piel="bms"]) .pm-quick .fi-marca-fila>.mlogo{width:72px;height:18px;flex:none;-webkit-mask-position:left center;mask-position:left center}
:where(.pm[data-piel="bms"]) .pm-quick .fi-marca-fila .mlogo-combo .mlogo{width:18px;height:18px}
:where(.pm[data-piel="bms"]) .pm-quick .fi-marca-fila .mlogo-combo .mlogo-tx{font-size:15px}
:where(.pm[data-piel="bms"]) .pm-quick .fi-extra{display:grid;gap:12px;min-width:0}
:where(.pm[data-piel="bms"]) .pm-quick .fi-extra:empty{display:none}
:where(.pm[data-piel="bms"]) .pm-quick .fi-cargando{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-quick .fi-cargando .pm-spinner{width:14px;height:14px;border-width:2px}
:where(.pm[data-piel="bms"]) .pm-quick .fi-mas{min-height:32px}
:where(.pm[data-piel="bms"]) .pm-quick .fi-nota{font-size:12px;line-height:1.5;color:var(--gris)}
/* Consulta de más unidades («¿Necesitás más de N unidades?»: viaja «a confirmar» en el mismo pedido) */
:where(.pm[data-piel="bms"]) .pm-consulta{width:min(640px,calc(100vw - 32px))}
:where(.pm[data-piel="bms"]) .pm-consulta-in{display:flex;flex-direction:column;gap:14px;min-height:0;overflow-y:auto;padding:24px 24px 20px}
:where(.pm[data-piel="bms"]) .pm-consulta-cab{display:flex;align-items:center;gap:12px;padding-right:44px}
:where(.pm[data-piel="bms"]) .pm-consulta-ico{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--negro);color:var(--blanco)}
:where(.pm[data-piel="bms"]) .pm-consulta-ico .pm-i{width:22px;height:22px}
:where(.pm[data-piel="bms"]) .pm-consulta-in h2{margin:0;font:900 26px/1 var(--f-tit);text-transform:uppercase;text-wrap:balance}
:where(.pm[data-piel="bms"]) .pm-consulta-sub{font-size:14px;line-height:1.5;color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-consulta-sub b{color:var(--negro);font-weight:600}
:where(.pm[data-piel="bms"]) .pm-consulta-prod{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--linea);border-radius:var(--r)}
:where(.pm[data-piel="bms"]) .pm-consulta-prod .pm-reng-ft{width:56px;height:56px}
:where(.pm[data-piel="bms"]) .pm-consulta-prod b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
:where(.pm[data-piel="bms"]) .pm-consulta-prod small{display:block;margin-top:3px;font-size:12px;color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-consulta-pie{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 18px}
:where(.pm[data-piel="bms"]) .pm-consulta-cant{display:flex;flex-direction:column;gap:7px}
:where(.pm[data-piel="bms"]) .pm-consulta-lbl{font:700 11px/1 var(--f-txt);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-consulta-fila{display:flex;align-items:center;gap:10px}
:where(.pm[data-piel="bms"]) .pm-consulta-fila .pm-step{height:46px}
:where(.pm[data-piel="bms"]) .pm-consulta-fila .pm-step button{width:42px}
:where(.pm[data-piel="bms"]) .pm-consulta-fila .pm-step input{width:60px;font-size:18px}
:where(.pm[data-piel="bms"]) .pm-consulta-uds{font-size:13px;color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-consulta-sep{align-self:stretch;width:1px;background:var(--linea)}
:where(.pm[data-piel="bms"]) .pm-consulta-acc{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
:where(.pm[data-piel="bms"]) .pm-consulta-nota{font-size:12px;color:var(--gris)}
/* Detalle de un pedido (Mis pedidos → Ver) */
:where(.pm[data-piel="bms"]) .pm-detail{width:min(760px,calc(100vw - 32px))}
:where(.pm[data-piel="bms"]) .pm-dialog-head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:18px 22px 14px;border-bottom:1px solid var(--linea)}
:where(.pm[data-piel="bms"]) .pm-dialog-head>div{min-width:0}
:where(.pm[data-piel="bms"]) .pm-dialog-head .etq{color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-dialog-head h2{margin-top:6px;font-size:30px;font-weight:900;overflow-wrap:anywhere}
:where(.pm[data-piel="bms"]) .pm-dialog-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 22px}
:where(.pm[data-piel="bms"]) .pm-dialog-actions{flex:none;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding:14px 22px;border-top:1px solid var(--linea);background:var(--papel)}
:where(.pm[data-piel="bms"]) .pm-dialog-actions .btn{height:44px;padding:0 16px;font-size:15px}
:where(.pm[data-piel="bms"]) .pm-det-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:13px;color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-det-line{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--linea)}
:where(.pm[data-piel="bms"]) .pm-det-line .pm-reng-ft{width:48px;height:48px}
:where(.pm[data-piel="bms"]) .pm-det-line>div{min-width:0}
:where(.pm[data-piel="bms"]) .pm-det-line b{display:block;font-size:13.5px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
:where(.pm[data-piel="bms"]) .pm-det-line small{display:block;font-size:12px;color:var(--gris)}
:where(.pm[data-piel="bms"]) .pm-det-line>span:last-child{font:900 18px/1 var(--f-tit);font-variant-numeric:tabular-nums;white-space:nowrap}
:where(.pm[data-piel="bms"]) .pm-det-tot{display:grid;gap:6px;margin-top:12px;padding:12px 14px;border-radius:var(--r);background:var(--papel)}
:where(.pm[data-piel="bms"]) .pm-det-tot>div{display:flex;justify-content:space-between;gap:16px;font-size:13.5px;color:var(--gris);font-variant-numeric:tabular-nums}
:where(.pm[data-piel="bms"]) .pm-det-tot>.t{color:var(--negro);font:900 22px/1.1 var(--f-tit)}
:where(.pm[data-piel="bms"]) .pm-det-notas{margin-top:12px;padding:12px;border:1px solid var(--linea);border-radius:var(--r);font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}
:where(.pm[data-piel="bms"]) .pm-det-nota{margin-top:10px;font-size:12px;line-height:1.5;color:var(--gris)}

/* ═══ 13. Avisos, WhatsApp, pie y estados ═══════════════════════════════════════════════════════════════════════ */
/* Avisos abajo a la izquierda: a la derecha están el panel del pedido y el WhatsApp, y no se tapan sus totales */
:where(.pm[data-piel="bms"]) .pm-toasts{position:fixed;z-index:200;left:max(18px,env(safe-area-inset-left,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));
  display:grid;gap:8px;width:min(380px,calc(100vw - 36px));pointer-events:none}
:where(.pm[data-piel="bms"]) .pm-toast{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r);background:var(--negro);color:var(--blanco);
  font-size:13.5px;line-height:1.4;box-shadow:0 14px 34px #0005;pointer-events:none;animation:bms-entra .3s ease-out}   /* no tienen botones: nunca frenan un toque */
:where(.pm[data-piel="bms"]) .pm-toast .pm-i{margin-top:1px;color:#4ade80}
:where(.pm[data-piel="bms"]) .pm-toast.is-error{background:var(--blanco);color:var(--negro);border:1px solid #f1c6c6;border-left:4px solid var(--rojo)}
:where(.pm[data-piel="bms"]) .pm-toast.is-error .pm-i{color:var(--rojo)}
:where(.pm[data-piel="bms"]) .pm-toast.is-saliendo{opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.wa-flot{position:fixed;z-index:35;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:10px;
  height:56px;padding:0 20px 0 16px;border-radius:999px;background:var(--wa);color:#fff;font:700 15px/1 var(--f-txt);text-decoration:none;box-shadow:0 10px 26px #0004;
  interpolate-size:allow-keywords;transition:transform .2s,opacity .2s,width .2s,height .2s,right .2s,padding .2s,visibility 0s}
.wa-flot:hover{transform:translateY(-2px)}
.wa-flot .pm-i{width:28px;height:28px}
/* Con la cinta de marcas (que se mueve) debajo, el botón no se ve hasta que se corre */
.pm[data-piel="bms"] .wa-flot.sobre-cinta{opacity:0;visibility:hidden;pointer-events:none}
/* Si en su lugar taparía algo que se toca, la piel le pone .is-aparte. En la compu se angosta a una franja verde pegada
   al borde (en el aire del costado de la página, donde no hay controles) y el mouse encima o el foco la devuelven; en el
   celular (más abajo) se esconde del todo, porque una franja no se puede tocar */
@media (min-width:861px){
  .pm[data-piel="bms"] .wa-flot.is-aparte:not(:hover):not(:focus-visible){right:0;width:14px;min-width:0;padding:0;gap:0;overflow:hidden;border-radius:10px 0 0 10px;
    box-shadow:-3px 4px 14px #0003;transform:none}
  .pm[data-piel="bms"] .wa-flot.is-aparte:not(:hover):not(:focus-visible)>*{visibility:hidden}
}
.pm[data-piel="bms"].con-capa .wa-flot{display:none}      /* con el pedido o un cartel abierto (la piel pone .con-capa) */
.pie{margin-top:40px;padding-block:22px 80px;background:var(--negro);color:var(--gris-n);font-size:13px}
.pie-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.pie b{color:var(--blanco);font:900 18px/1 var(--f-tit);text-transform:uppercase}
.pie a{color:var(--blanco);text-underline-offset:3px}
:where(.pm[data-piel="bms"]) .pm-state{display:flex;flex-direction:column;align-items:center;gap:14px;padding:36px 20px;color:var(--gris);text-align:center}
:where(.pm[data-piel="bms"]) .pm-state h1{color:var(--negro);font:900 38px/1 var(--f-tit);text-transform:uppercase;text-wrap:balance}
:where(.pm[data-piel="bms"]) .pm-boot{min-height:60vh;justify-content:center}
:where(.pm[data-piel="bms"]) .pm-state-symbol{color:var(--negro);font-size:44px;line-height:1}
:where(.pm[data-piel="bms"]) .pm-spinner{display:block;width:28px;height:28px;border:3px solid var(--linea);border-top-color:var(--negro);border-radius:50%;animation:bms-gira .9s linear infinite}
:where(.pm[data-piel="bms"]) .pm-noscript{position:fixed;z-index:200;inset:30% 16px auto;max-width:520px;margin:0 auto;padding:24px;border:2px solid var(--negro);
  border-radius:var(--r);background:var(--blanco);color:var(--negro);text-align:center}

/* ═══ 14. Movimiento ════════════════════════════════════════════════════════════════════════════════════════════ */
@keyframes bms-cinta{to{transform:translateX(-50%)}}
@keyframes bms-gira{to{transform:rotate(360deg)}}
@keyframes bms-brillo{to{background-position:-220% 0}}
@keyframes bms-salto{40%{transform:scale(1.25)}}
@keyframes bms-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes bms-aparece{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes bms-baja{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes bms-sube{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes bms-desliza{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}

/* ═══ 15. Compu chica (1166 × 554) y tablet ═════════════════════════════════════════════════════════════════════ */
@media (max-width:1240px){
  .cab .buscar{width:190px}
  .cats .cat img,.cats .cat .cat-ico{width:72px;height:72px}
}
@media (max-width:1100px){
  .cab-in{gap:14px}
  .cat-cab-tx{flex-basis:100%}
  .menu .pm-nav-item{padding:0 8px}
  .avatar{display:none}
  .cats{grid-template-columns:repeat(4,1fr)}
  :where(.pm[data-piel="bms"]) .pm-sol-in{grid-template-columns:minmax(150px,1fr) auto minmax(0,1fr) auto;row-gap:12px}
  :where(.pm[data-piel="bms"]) .pm-sol-acc{grid-column:1/-1;justify-content:flex-end}
}

/* Compu con pantalla baja (p. ej. 1166 × 554): el panel del pedido, más compacto (cabecera, buscador, renglones de un
   renglón de título y pie) para que se vean al menos tres renglones */
@media (min-width:861px) and (max-height:720px){
  .pan-cab{padding:8px 18px}
  .pan-cab h2{font-size:24px}
  .pan-sub{margin-top:2px}
  .panel .pm-addbar{padding:6px 18px}
  .buscar-add{height:34px}
  .lineas .lin{grid-template-columns:40px minmax(0,1fr);gap:10px;padding:5px 18px}
  .lineas .lin-ft{width:40px;height:40px;padding:2px}
  .lineas .lin-t{-webkit-line-clamp:1}
  .lineas .lin-cu{gap:2px}
  .lineas .lin-q :is(.cant,.pm-step){height:28px}
  .lineas .lin-q .quitar{width:28px;height:28px}
  .lineas .lin-q b{font-size:17px}
  :where(.pm[data-piel="bms"]) .pm-tot-it.total em.pm-tot-conf{max-width:none}
  .pan-pie{gap:5px;padding:6px 18px 8px}
  :where(.pm[data-piel="bms"]) .pm-tot-izq>span+span{display:none}
  .tot{gap:3px}
  :where(.pm[data-piel="bms"]) .pm-tot-it.total span{font-size:24px}
  .nota textarea{height:32px;min-height:32px;padding:6px 10px}
  .pan-acc{gap:2px 12px}
  .pan-acc .btn{height:38px}
  .vaciar{min-height:22px}
}

/* ═══ 16. Celular (≤ 860 px): menú abajo, ficha y pedido como hoja, toques de 44 px y campos de 16 px ═══ */
@media (max-width:860px){
  .pm[data-piel="bms"]{--cab:58px}
  /* Menú de secciones abajo, fijo */
  .menu{position:fixed;left:0;right:0;bottom:0;z-index:45;gap:0;justify-content:space-around;padding-bottom:env(safe-area-inset-bottom,0px);
    background:var(--blanco);border-top:1px solid var(--linea)}
  .menu .pm-nav-item{flex:1;justify-content:center;height:56px;padding:0 4px;border-bottom:0;border-top:3px solid transparent;font-size:13px;letter-spacing:.06em}
  .menu .pm-nav-item[aria-current="page"]{border-top-color:var(--negro)}
  /* Con «Ofertas» y «Oportunidades» a la vista son cinco secciones: más justas y, si hace falta, en dos renglones; nunca
     cortadas ni afuera de la pantalla (también a 360 px) */
  .menu:has(#pm-nav-ofertas:not([hidden])):has(#pm-nav-oportunidades:not([hidden])) .pm-nav-item{padding:0 2px;font-size:12px;letter-spacing:.02em;
    line-height:1.05;text-align:center;white-space:normal}
  .cab-in{gap:10px}
  .logo-tx b{font-size:18px}
  .logo-tx small{display:none}
  .logo-img{width:34px;height:34px}
  .logo{min-width:44px;min-height:44px}
  /* Con la sesión iniciada el buscador queda en la cabecera: el logo va sin el nombre */
  .pm[data-piel="bms"]:not([data-vista="auth"]):not([data-vista="boot"]):not([data-vista="off"]) .logo-tx{display:none}
  #pm-account{flex:1;gap:8px}
  .cab .buscar{flex:1 1 0;width:auto;height:46px;padding:0 10px}
  .buscar input{font-size:16px}
  .salir{min-width:44px;height:44px;padding:0 4px}
  /* Todo lo que se toca: 44 × 44 como mínimo, y los campos con letra de 16 px (si no, el teléfono agranda la pantalla).
     Las cantidades miden 46 de alto: adentro, con el borde, los botones quedan de 44. */
  :where(.pm[data-piel="bms"]) :is(.pm-step,.cant){min-height:46px}
  :where(.pm[data-piel="bms"]) :is(.pm-step,.cant) button{min-width:44px}
  :where(.pm[data-piel="bms"]) :is(.pm-step,.cant) input{font-size:16px;min-width:30px}   /* el número, más angosto: entra a 320 */
  :where(.pm[data-piel="bms"]) .pm-en-pedido{min-height:48px}
  :where(.pm[data-piel="bms"]) :is(.pm-card-tit,.card h3) button{min-height:44px;line-height:22px}   /* 2 × 22 = 44: no asoma un 3.er renglón */
  :where(.pm[data-piel="bms"]) .pm-quick .fi-mas{display:inline-flex;align-items:center;min-height:44px}
  :where(.pm[data-piel="bms"]) .pm-cfg-lista .pm-cfg-op{min-height:44px}
  :where(.pm[data-piel="bms"]) .pm-activo{height:44px;padding:0 0 0 14px}
  :where(.pm[data-piel="bms"]) .pm-activo button{width:44px;height:44px;background:none}
  .clave button{height:44px}
  .reg-acepta{min-height:44px;align-items:center}
  .link{display:inline-flex;align-items:center;min-height:44px;padding-bottom:0;border-bottom:0;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
  .pie a{display:inline-flex;align-items:center;min-height:44px}
  .buscar-add{height:46px}
  .nota textarea{height:64px;min-height:64px}                                 /* sus 2 renglones: el texto de ayuda entra entero */
  /* Desplegables: 44 px y letra de 16 desde 860 (el botón compacto y la hoja de abajo, desde 760) */
  :where(.pm[data-piel="bms"]) .pm-dd-btn{height:44px}
  :where(.pm[data-piel="bms"]) .pm-dd-buscar{height:46px}
  :where(.pm[data-piel="bms"]) .pm-dd-buscar input{font-size:16px}
  :where(.pm[data-piel="bms"]) .pm-dd-op{min-height:44px}
  .btn-ped{height:44px;padding:0 12px}
  .btn-ped .tx{display:none}
  .ing-wa{justify-content:center;min-width:44px}
  .ing-wa span{display:none}
  .btn-alta{height:44px;padding:0 10px;font-size:13px}
  /* Ingreso en una columna: título, tarjeta y los tres beneficios */
  .ing-zona{padding-block:18px 24px;--banda:330px}
  .ing-grid{grid-template-columns:1fr;gap:16px}
  .ing-izq{display:contents}
  .ing-txt{order:1;min-height:0}
  .ing-txt p{font-size:14px}
  .ing-card{order:2;padding:18px 16px}
  .ing-grid .ing-card{width:auto;justify-self:stretch}
  .ing-pasos{order:3;grid-template-columns:1fr}
  .ing-izq .ing-pasos{margin-top:0}
  .volver,.olvido{font-size:14px}
  /* Portada */
  .hero-in{grid-template-columns:1fr;gap:6px;padding-block:16px 14px}
  .hero-btns .btn{height:44px}
  /* Vidriera: los puntos son botones de 44 de alto (la rayita va adentro), en su propia fila debajo; con los 9 se
     angostan para entrar en el ancho */
  .vitrina{height:176px}
  .vitrina .vit-item{inset:0 0 44px}
  .vitrina .vit-foto{width:128px;height:128px;border-radius:18px;box-shadow:0 0 0 6px #ffffff10,0 0 0 12px #ffffff08}
  .vitrina .vit-tag{max-width:180px}
  .vitrina .vit-tag b{font-size:20px}
  .vitrina .vit-pts{left:0;right:0;transform:none;justify-content:center;gap:0}
  .vitrina .vit-pts button,.vitrina .vit-pts button.is-on{position:relative;flex:0 1 44px;min-width:0;height:44px;background:none}
  .vitrina .vit-pts button::before{content:"";position:absolute;left:25%;right:25%;top:20px;height:4px;background:#ffffff40}
  .vitrina .vit-pts button.is-on::before{background:var(--blanco)}
  .vitrina .vit-off{margin:-2px -8px 0 0}      /* sin subirse a «Ver catálogo», que queda justo arriba */
  .vitrina .vit-tag{margin-top:0}              /* casi tan alto como la foto: centrado */
  .datos-in{grid-template-columns:1fr 1fr}
  .dato{gap:8px;padding:12px 6px}
  .dato:nth-child(3){border-left:0}
  .dato:nth-child(n+3){border-top:1px solid var(--linea)}
  .dato .dato-ico{width:34px;height:34px}
  .dato b{font-size:15px}
  .sec-cab h2{font-size:30px}
  .sec-cab.en-linea p{display:none}
  .riel-acc .riel-fl{display:none}      /* en el celular las franjas se pasan con el dedo */
  .cats{grid-template-columns:repeat(3,1fr);gap:8px}
  .cats .cat img,.cats .cat .cat-ico{width:60px;height:60px}
  .cats .cat b{font-size:14px}
  .riel{grid-auto-columns:minmax(168px,1fr)}
  .riel.con-tarjetas{grid-auto-columns:minmax(160px,calc((100% - 8px) / 2))}
  .oport{margin-top:26px;padding-block:22px 26px}
  .oport-reloj{padding:5px 10px 5px 7px;font-size:12px}
  .oport-reloj b{font-size:15px}
  .cinta-pista>button{height:64px}
  /* Catálogo: productos de a dos */
  .cat-cab h1{font-size:40px}
  .chip,:where(.pm[data-piel="bms"]) .pm-cat{height:44px}
  /* Franja del catálogo: el título con «Solo entrega inmediata» al lado (si no entra, abajo); después el subtítulo y
     los desplegables a lo ancho */
  .cat-cab-in{justify-content:flex-start;gap:8px 10px}
  .cat-cab-tx,.cat-cab-ctl{display:contents}
  .cat-cab-tx .sec-tit-fila{order:1;flex:1 1 auto}
  .cat-cab .oport-inm{order:2;height:44px}
  .cat-cab-tx p{order:3;flex:1 1 100%;margin:0}
  .cat-cab .chip-inm{order:2;height:44px;gap:6px;padding:0 12px;font-size:13px}
  .cat-cab .filtros-bar{order:4;flex:1 1 100%;margin-top:4px}
  .grid{grid-template-columns:1fr 1fr;gap:8px}
  :where(.pm[data-piel="bms"]) :is(.pm-card-img img,.card-foto img){inset:10px;width:calc(100% - 20px);height:calc(100% - 20px)}
  :where(.pm[data-piel="bms"]) :is(.pm-card-body,.card-cuerpo){padding:10px}
  :where(.pm[data-piel="bms"]) .pm-card-tit{font-size:13px}
  :where(.pm[data-piel="bms"]) :is(.pm-card-precio,.pm-quick-pr) .pm-pr.is-usd b,:where(.pm[data-piel="bms"]) .precio b{font-size:24px}
  :where(.pm[data-piel="bms"]) :is(.pm-card-buy,.card .comprar){flex-direction:column;align-items:stretch;gap:6px}
  :where(.pm[data-piel="bms"]) :is(.pm-card-buy .pm-step,.card .cant){justify-content:space-between;height:46px}
  :where(.pm[data-piel="bms"]) :is(.pm-card-buy .pm-step button,.card .cant button){width:44px}
  :where(.pm[data-piel="bms"]) :is(.pm-btn-add,.agregar,.en-ped,.pm-en-pedido){flex:none;height:44px}
  :where(.pm[data-piel="bms"]) .pm-en-pedido{grid-template-columns:44px minmax(0,1fr) 44px}
  /* En la tarjeta (angosta): «✓ N en tu pedido» arriba, en un renglón, y − / + abajo, de 44: la etiqueta entra entera */
  :where(.pm[data-piel="bms"]) .pm-card-buy .pm-en-pedido{height:auto;grid-template-columns:1fr 1fr;grid-template-areas:"tx tx" "menos mas"}
  :where(.pm[data-piel="bms"]) .pm-card-buy .pm-en-pedido-tx{grid-area:tx;flex-direction:row;gap:6px;min-height:44px;border-bottom:1px solid}
  :where(.pm[data-piel="bms"]) .pm-card-buy .pm-en-pedido-tx small{font-size:12px}
  :where(.pm[data-piel="bms"]) .pm-card-buy .pm-en-pedido-b{min-height:44px}
  :where(.pm[data-piel="bms"]) .pm-card-buy .pm-en-pedido-b:first-child{grid-area:menos}
  :where(.pm[data-piel="bms"]) .pm-card-buy .pm-en-pedido-b:last-child{grid-area:mas;border-left:1px solid}
  :where(.pm[data-piel="bms"]) .pm-step input{font-size:16px}
  :where(.pm[data-piel="bms"]) .pm-card.is-en-pedido::after{right:8px;top:8px;padding:5px 7px;font-size:10.5px}
  :where(.pm[data-piel="bms"]) :is(.pm-btn,.pm-icon-btn,.mini){min-height:44px}
  .mini,:where(.pm[data-piel="bms"]) .pm-icon-btn{height:44px}
  .link-chico{min-height:44px}
  /* Mis pedidos */
  :where(.pm[data-piel="bms"]) .pm-sol-in{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px}
  :where(.pm[data-piel="bms"]) .pm-sol-in>.pm-estado{justify-self:end;align-self:start}
  :where(.pm[data-piel="bms"]) .pm-sol-prods{grid-column:1/-1}
  :where(.pm[data-piel="bms"]) .pm-sol-total{text-align:left}
  :where(.pm[data-piel="bms"]) .pm-sol-acc{grid-column:auto;justify-content:flex-end}
  :where(.pm[data-piel="bms"]) .pm-icon-btn span{display:none}
  :where(.pm[data-piel="bms"]) .pm-sol-acc .pm-icon-btn{width:44px;padding:0;justify-content:center}
  :where(.pm[data-piel="bms"]) .ped{grid-template-columns:minmax(0,1fr);gap:8px}
  :where(.pm[data-piel="bms"]) .ped-fotos{display:none}
  :where(.pm[data-piel="bms"]) .ped b{font-size:18px}
  :where(.pm[data-piel="bms"]) .ped-acc{grid-column:auto}
  /* Pedido: hoja que sube desde abajo */
  .panel{top:auto;left:0;right:0;width:100%;height:92vh;height:min(92dvh,calc(100% - 16px));padding-right:0;border-radius:12px 12px 0 0;overflow:hidden;
    box-shadow:0 -20px 50px #0005;animation:bms-sube .28s ease-out}
  .cerrar{width:44px;height:44px}
  .pan-cab h2{font-size:28px}
  .vaciar{min-height:44px}
  .buscar-add input,.nota textarea{font-size:16px}
  .lineas .quitar,:where(.pm[data-piel="bms"]) .pm-x{width:44px;height:44px}
  /* Renglón de la piel en el celular: foto más chica (la cantidad ya tiene sus toques de 44 y el subtotal baja si no entra) */
  .lineas .lin{grid-template-columns:52px minmax(0,1fr);padding:12px 16px}
  .lineas .lin-ft{width:52px;height:52px}
  /* La línea chica, en dos renglones si no entra: la entrega entera arriba y el precio por unidad abajo */
  .lineas .lin-meta{flex-wrap:wrap}
  /* Renglón del pedido en el celular: cantidad y subtotal en una fila; el precio unitario, abajo en la suya */
  :where(.pm[data-piel="bms"]) .pm-reng-in{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"prod prod" "cant sub" "pu pu"}
  :where(.pm[data-piel="bms"]) .pm-reng-pu{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
  :where(.pm[data-piel="bms"]) .pm-reng.is-consulta .pm-reng-pu{display:none}
  :where(.pm[data-piel="bms"]) .pm-reng-prod{padding-right:40px}
  :where(.pm[data-piel="bms"]) .pm-reng-cant .pm-step{height:46px}
  :where(.pm[data-piel="bms"]) .pm-reng-cant .pm-step button{width:44px}
  /* Carteles como hoja de abajo; la ficha, foto arriba y datos abajo */
  :where(.pm[data-piel="bms"]) .pm-dialog{width:100%;max-width:100%;max-height:92vh;max-height:92dvh;margin:auto 0 0;border-radius:12px 12px 0 0;
    padding-bottom:env(safe-area-inset-bottom,0px);animation:bms-sube .28s ease-out}
  :where(.pm[data-piel="bms"]) .pm-close{width:44px;height:44px}
  :where(.pm[data-piel="bms"]) .pm-quick{height:92vh;height:92dvh}
  :where(.pm[data-piel="bms"]) .pm-quick-in{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  :where(.pm[data-piel="bms"]) .pm-quick-foto{height:220px;border-right:0;border-bottom:1px solid var(--linea)}
  :where(.pm[data-piel="bms"]) .pm-quick-foto img{inset:16px;width:calc(100% - 32px);height:calc(100% - 32px)}
  :where(.pm[data-piel="bms"]) .pm-quick-info{padding:14px 16px 16px}
  :where(.pm[data-piel="bms"]) .pm-quick-info h2{font-size:19px}
  :where(.pm[data-piel="bms"]) .pm-quick .galeria{grid-template-rows:200px auto;padding:12px;border-right:0;border-bottom:1px solid var(--linea)}
  :where(.pm[data-piel="bms"]) .pm-quick .gal-main img{max-height:196px}
  :where(.pm[data-piel="bms"]) .pm-quick .gal-tira button{width:50px;height:50px}
  :where(.pm[data-piel="bms"]) .pm-quick .gal-fl{width:44px;height:44px}
  :where(.pm[data-piel="bms"]) .pm-quick .fi-info{padding:14px 16px}
  :where(.pm[data-piel="bms"]) .pm-quick .fi-compra{padding:10px 16px}
  :where(.pm[data-piel="bms"]) .pm-consulta-in{padding:20px 16px 16px}
  :where(.pm[data-piel="bms"]) .pm-consulta-in h2{font-size:22px}
  :where(.pm[data-piel="bms"]) .pm-consulta-pie{flex-direction:column;align-items:stretch}
  :where(.pm[data-piel="bms"]) .pm-consulta-sep{display:none}
  :where(.pm[data-piel="bms"]) .pm-consulta-acc{flex-direction:column-reverse;margin-left:0}
  :where(.pm[data-piel="bms"]) .pm-consulta-acc .pm-btn{width:100%}
  :where(.pm[data-piel="bms"]) .pm-consulta-fila .pm-step input{font-size:18px}
  :where(.pm[data-piel="bms"]) .pm-dialog-head{padding:14px 16px 12px}
  :where(.pm[data-piel="bms"]) .pm-dialog-head h2{font-size:26px}
  :where(.pm[data-piel="bms"]) .pm-dialog-body{padding:12px 16px}
  :where(.pm[data-piel="bms"]) .pm-dialog-actions{padding:12px 16px}
  :where(.pm[data-piel="bms"]) .pm-dialog-actions .btn{flex:1 1 auto}
  /* WhatsApp: solo el logo, arriba del menú. Los avisos, arriba (debajo de la cabecera): abajo taparían el menú, el
     WhatsApp y el botón del pedido */
  .wa-flot{right:14px;bottom:calc(70px + env(safe-area-inset-bottom,0px));width:48px;height:48px;padding:0;justify-content:center}
  .wa-flot .pm-i{width:26px;height:26px}
  .wa-flot span{display:none}
  /* Si taparía algo, baja y se esconde (no se puede tocar ni enfocar); vuelve cuando eso deja de estar ahí. Para dejarlo
     siempre a la vista, alcanza con borrar esta regla y dejarle lugar abajo a la página */
  .pm[data-piel="bms"] .wa-flot.is-aparte{opacity:0;transform:translateY(calc(100% + 24px));pointer-events:none;visibility:hidden;
    transition:transform .2s,opacity .2s,visibility 0s .2s}
  :where(.pm[data-piel="bms"]) .pm-toasts{left:10px;right:10px;width:auto;top:calc(var(--cab) + 8px + env(safe-area-inset-top,0px));bottom:auto}
  .pm[data-piel="bms"]:is([data-vista="auth"],[data-vista="boot"],[data-vista="off"]) .pm-toasts{top:calc(8px + env(safe-area-inset-top,0px))}
  :where(.pm[data-piel="bms"]) .pm-toast{animation-name:bms-baja}
  :where(.pm[data-piel="bms"]) .pm-toast:not(:last-child):not(.is-error){display:none}   /* en el celular, solo el último (los errores quedan) */
  /* Con el pedido abierto, el aviso más compacto y en 2 renglones como máximo, para que no tape su ✕; si no, entero */
  .pm[data-piel="bms"]:has(#pm-panel-pedido:not([hidden])) .pm-toast{padding:8px 12px;font-size:13px}
  .pm[data-piel="bms"]:has(#pm-panel-pedido:not([hidden])) .pm-toast span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* Con el pedido abierto (hoja de abajo), los avisos van arriba de todo, sobre la franja oscura: nunca encima de su ✕ */
  .pm[data-piel="bms"]:has(#pm-panel-pedido:not([hidden])) .pm-toasts{top:calc(8px + env(safe-area-inset-top,0px))}
  .pie{padding-bottom:110px}
}
/* Tablet vertical: de a tres (de a dos queda para el teléfono) */
@media (min-width:601px) and (max-width:860px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Desplegables de filtros: hoja de abajo desde 760 px (ahí portal.js deja de ubicarlos junto al botón) */
@media (max-width:760px){
  .filtros-bar{gap:6px}
  :where(.pm[data-piel="bms"]) .pm-dd{flex:1 1 0}
  :where(.pm[data-piel="bms"]) .pm-dd-btn{width:100%;min-width:0;max-width:none;height:44px;gap:6px;padding:0 8px 0 6px}
  :where(.pm[data-piel="bms"]) :is(.pm-dd-txt small,.pm-dd-btn>.pm-i){display:none}
  :where(.pm[data-piel="bms"]) .pm-dd-txt strong{font-size:13px}
  :where(.pm[data-piel="bms"]) .pm-dd-btn[data-vacio] strong{display:none}
  :where(.pm[data-piel="bms"]) .pm-dd-btn[data-vacio] .pm-dd-txt em{display:block;font-size:13px;font-style:normal;font-weight:600}
  :where(.pm[data-piel="bms"]) .pm-dd-orden{flex:0 0 auto}
  :where(.pm[data-piel="bms"]) .pm-dd-orden .pm-dd-txt{display:none}
  :where(.pm[data-piel="bms"]) .pm-dd-orden .pm-dd-btn{width:44px;padding:0;justify-content:center}
  :where(.pm[data-piel="bms"]) .pm-dd-velo{display:block;position:fixed;inset:0;z-index:69;background:#0009}
  :where(.pm[data-piel="bms"]) :is(.pm-dd-panel,.pm-dd-panel.is-marcas){top:auto;left:0;right:0;bottom:0;width:auto;max-width:none;border:0;border-radius:12px 12px 0 0;
    padding:10px 10px calc(14px + env(safe-area-inset-bottom,0px));animation:bms-sube .26s ease-out}
  :where(.pm[data-piel="bms"]) .pm-dd-lista{max-height:62vh}
  :where(.pm[data-piel="bms"]) .pm-dd-panel.is-marcas .pm-dd-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Celular angosto (menos de 375 px): el título del catálogo un poco más chico, para que «Solo entrega inmediata» siga
   entrando a su lado */
@media (max-width:374px){
  #pm-catalogue .cat-cab h1{font-size:36px}
}
@media (max-width:400px){
  :where(.pm[data-piel="bms"]) :is(.pm-card-precio,.pm-quick-pr) .pm-pr.is-usd b,:where(.pm[data-piel="bms"]) .precio b{font-size:22px}
  :where(.pm[data-piel="bms"]) .pm-card-buy .pm-btn-config .pm-i{display:none}   /* «Elegí memoria y disco» en dos renglones */
  :where(.pm[data-piel="bms"]) :is(.pm-card-body,.card-cuerpo){padding-inline:9px}   /* a 320, −/+ de 44 y el número de 30 entran justo */
}
@media (prefers-reduced-motion:reduce){
  :where(.pm[data-piel="bms"]) *,:where(.pm[data-piel="bms"]) *::before,:where(.pm[data-piel="bms"]) *::after{animation:none!important;transition:none!important}
  /* Sin movimiento, la cinta de marcas de la portada se desliza a mano (la vidriera tampoco gira sola: piel.js) */
  #pm-inicio .cinta{overflow-x:auto;scrollbar-width:thin}
}