/* Catálogo de MUEBLES público (/muebles) — síntesis 2026-10.
   Es una página SUELTA (la ve el cliente sin login, por pedidos.gerszuny.com.ar):
   no lleva la estructura del Manager (shell.css) ni app.css. Carga tokens.css +
   ui.css (componentes comunes: .plancha, .grilla/.gr, .corte, .seg, .stepper,
   .btn, .campo/.entrada, .fija-cel) y esta hoja. Al cambiarla, subir el ?v= en
   templates/muebles.html. Colores: solo tokens.
   Cortes (los de ui.css): ≥ 1280 el pedido va en columna al costado · 901-1279
   el pedido es una barra pegada abajo de la lista · ≤ 900 celular: barra fija
   del pulgar (.fija-cel) y la lista en fichas. */

/* sin barra de abajo del Manager: las barras del pulgar van al borde */
body.pag-muebles { --nav-abajo: 0px; --alto-fija: 0px; min-height: 100vh; }
body.pag-muebles.con-dialogo { overflow: hidden; }

/* ===== Barra de arriba (marca Gerszuny) ===== */
.mue-top { background: var(--navy); color: var(--navy-tinta); }
.mue-top-in { max-width: var(--ancho); margin: 0 auto; min-height: var(--alto-top); padding: 0 var(--e-5);
  display: flex; align-items: center; gap: var(--e-3); }
/* el logo lleva fondo blanco a propósito: el globo es azul marino y sobre el
   navy se perdería (el PNG es transparente: el mismo archivo es el favicon) */
.mue-top .logo { width: 36px; height: 36px; flex: none; border-radius: var(--r-3); background: var(--blanco);
  padding: 3px; object-fit: contain; }
.mue-nombre { font: 600 var(--t-4)/1.15 var(--f-cond); color: var(--blanco); letter-spacing: .01em; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* acceso al portal de vendedores: discreto (Diego) pero con 44 px para el dedo */
.mue-top .link-intranet { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--e-2); color: var(--navy-tenue); font-size: var(--t-1); letter-spacing: .03em; }
.mue-top .link-intranet:hover { color: var(--blanco); }
/* modo vendedor: quién carga y adónde va el cliente */
.mue-vend { margin-left: auto; display: flex; align-items: center; gap: var(--e-2) var(--e-3); flex-wrap: wrap;
  justify-content: flex-end; font-size: var(--t-2); color: var(--navy-tinta); min-width: 0; }
.mue-vend .ic { color: var(--navy-tenue); }
.mue-vend strong { color: var(--blanco); font-weight: 600; }
.mue-vend .expl { color: var(--navy-tenue); }
.mue-vend .vend-txt { min-width: 0; }
.mue-vend a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--e-3);
  border: 1px solid var(--navy-3); border-radius: var(--r-2); color: var(--blanco); font-weight: 500; }
.mue-vend a:hover { background: var(--navy-2); text-decoration: none; }

/* ===== Cuerpo ===== */
.mue-main { max-width: var(--ancho); margin: 0 auto; padding: var(--e-5) var(--e-5) var(--e-7); }
.cat-cab { margin-bottom: var(--e-4); }
.cat-cab .marca-g { font: 700 var(--t-2)/1 var(--f-cond); letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy-3); }
.cat-cab h1 { margin-top: 6px; }
.cat-cab .bajada { font-size: var(--t-2); color: var(--tinta-2); margin-top: 4px; }
.cat-cab .bajada strong { font-weight: 600; color: var(--tinta); }
/* aviso comercial: tono de marca (el ámbar d- queda para los estados de la
   fila: "Últimas N" y "a consultar") */
.cat-cab .promo { display: inline-block; margin-top: var(--e-2); padding: 4px 10px;
  border-radius: var(--r-1); background: var(--plancha-2); color: var(--navy-3); font-size: var(--t-2);
  box-shadow: inset 3px 0 0 var(--navy-3); }
.cat-cab .promo b { font-weight: 600; }

.mue-lay { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); align-items: start; }

/* ===== Herramientas de la lista: buscador + orden + marcas (pegadas arriba) ===== */
.cat-fija { position: sticky; top: 0; z-index: 12; background: var(--plancha);
  border-bottom: var(--linea); border-radius: var(--r-3) var(--r-3) 0 0; }
.cat-herr { display: flex; gap: var(--e-2); align-items: center; padding: var(--e-3) var(--e-4); }
.cat-herr .buscar-local { flex: 1; min-width: 0; height: var(--b-2); padding: 0 var(--e-3); background: var(--plancha); }
.cat-herr .buscar-local input { font-size: var(--t-3); height: 100%; }
.cat-herr .buscar-local input::-webkit-search-cancel-button { cursor: pointer; }
.orden-wrap { position: relative; flex: none; display: flex; align-items: center; }
.orden-wrap select { height: var(--b-2); border: var(--linea-2); border-radius: var(--r-2); background: var(--plancha);
  padding: 0 var(--e-2); font-size: var(--t-2); color: var(--tinta); cursor: pointer; }
.cats-wrap { display: flex; align-items: flex-start; gap: var(--e-2); padding: 0 var(--e-4) var(--e-3);
  transition: max-height .25s, opacity .2s, padding .25s; max-height: 400px; overflow: hidden; }
.cats { display: flex; flex-wrap: wrap; gap: var(--e-1); flex: 1; min-width: 0; }
.cats .seg { cursor: pointer; font-family: inherit; font-size: var(--t-2); }
.btn-cats { display: none; }

/* ===== Grilla de muebles ===== */
.grilla.muebles { --cols: 72px minmax(0, 1fr) 84px 124px 120px; }
.grilla.muebles .gr { min-height: 84px; }
.grilla.muebles .gr.enc { min-height: 36px; border-top: 0; }
.grilla.muebles .gr-grupo { scroll-margin-top: 150px; }
/* resguardo si una foto no carga: el alt no se desparrama por la celda */
.foto-m { width: 72px; height: 64px; border-radius: var(--r-2); object-fit: cover; background: var(--plancha-2);
  border: var(--linea); cursor: zoom-in; overflow: hidden; font-size: 0; color: transparent; }
.foto-vacia { width: 72px; height: 64px; border-radius: var(--r-2); border: 1px dashed var(--filete-2);
  display: grid; place-items: center; color: var(--tinta-3); }
.foto-vacia .ic { width: 22px; height: 22px; }
.gr-tit .corte { font-weight: 500; }
.gr-meta .med { font: 500 var(--t-2)/1.2 var(--f-cond); color: var(--tinta-2); }
.sub-linea { font: 600 var(--t-2)/1.2 var(--f-cond); color: var(--accion-hover); }
.disp { font: 500 var(--t-2)/1 var(--f-cond); color: var(--tinta-2); white-space: nowrap; }
.disp.pocas { color: var(--d-tinta); font-weight: 600; }
.disp.nada { color: var(--tinta-3); }
.precio { font: 600 var(--t-4)/1 var(--f-cond); white-space: nowrap; }
.precio small { font: 500 var(--t-1)/1 var(--f-texto); color: var(--tinta-3); margin-left: 2px; }
.precio.consultar { font: 600 var(--t-2)/1.2 var(--f-cond); color: var(--d-tinta); white-space: normal; }
.gr.en-pedido { background: var(--accion-suave); box-shadow: inset 3px 0 0 var(--accion); }
.gr.en-pedido .corte { --fondo-fila: var(--accion-suave); }
.c-step .stepper .ic { width: 15px; height: 15px; }

/* carga */
.sk { height: 84px; border-top: var(--linea); position: relative; overflow: hidden; background: var(--plancha); }
.sk::before { content: ""; position: absolute; left: var(--e-4); top: 10px; width: 72px; height: 64px;
  border-radius: var(--r-2); background: var(--plancha-2); }
.sk::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--plancha-2), transparent); animation: sk 1.2s infinite; }
@keyframes sk { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
#cargando .txt { padding: var(--e-4); text-align: center; font-size: var(--t-2); color: var(--tinta-3); border-top: var(--linea); }
#masSentinel { display: none; padding: var(--e-4); text-align: center; font-size: var(--t-2); color: var(--tinta-3);
  border-top: var(--linea); }
.vacio-filtro .btn { margin-top: var(--e-3); }

/* ===== El pedido (al costado / barra) ===== */
.pedido { position: sticky; bottom: var(--e-3); order: 2; z-index: 11; display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; box-shadow: var(--sombra-pop); }
.mue-lay > .pedido { margin-top: 0; }
.pedido .plancha-cab { border: 0; }
.pedido .pedido-vacio, .pedido .pedido-lista, .pedido .ped-nota, .pedido .ped-total .rotulo { display: none; }
.pedido-vacio { padding: var(--e-5) var(--e-4); text-align: center; color: var(--tinta-3); font-size: var(--t-2);
  display: grid; gap: var(--e-2); justify-items: center; }
.pedido-lista { max-height: 46vh; overflow: auto; }
.ped-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--e-2); padding: var(--e-2) var(--e-4);
  border-top: var(--linea); font-size: var(--t-2); }
.ped-fila .d { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ped-fila .s { font-family: var(--f-cond); font-weight: 600; text-align: right; white-space: nowrap; }
.ped-fila .c { grid-column: 1 / -1; font-size: var(--t-1); color: var(--tinta-3); }
.ped-total { display: flex; align-items: baseline; justify-content: flex-end; gap: var(--e-2); padding: var(--e-3) var(--e-4); }
.ped-total .v { font: 600 var(--t-5)/1 var(--f-cond); white-space: nowrap; }
.ped-total .v small { font: 500 var(--t-1)/1 var(--f-texto); color: var(--tinta-3); margin-left: 2px; }
.ped-total .v.pulso, .fija-cel .pulso { animation: pulso .3s; }
@keyframes pulso { 50% { transform: scale(1.06); } }
.ped-nota { padding: 0 var(--e-4) var(--e-3); font-size: var(--t-1); color: var(--tinta-3); }
.ped-acc { padding: var(--e-2) var(--e-3); display: grid; }

/* ===== Diálogos: pedido, enviado, visor ===== */
.overlay { position: fixed; inset: 0; z-index: 40; background: var(--velo); overflow-y: auto;
  visibility: hidden; opacity: 0; transition: opacity .18s, visibility .18s; }
/* al abrir, la visibility cambia ya (sin transición) para que el foco pueda
   entrar a la hoja en el mismo momento; al cerrar se desvanece */
.overlay.visible { visibility: visible; opacity: 1; transition: opacity .18s, visibility 0s; }
.hoja { position: relative; background: var(--plancha); max-width: 640px; margin: var(--e-6) auto; border-radius: var(--r-3);
  box-shadow: var(--sombra-pop); outline: 0; }
.hoja-cab { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-3) var(--e-3) var(--e-5); border-bottom: var(--linea); background: var(--plancha);
  border-radius: var(--r-3) var(--r-3) 0 0; }
.hoja-cab h2 { flex: 1; min-width: 0; }
.hoja-cab .btn-ic { width: 40px; height: 40px; }
.hoja-cuerpo { padding: var(--e-2) var(--e-5) var(--e-5); }
.hoja-pie { position: sticky; bottom: 0; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-2) var(--e-3);
  align-items: center; padding: var(--e-3) var(--e-5); background: var(--plancha); border-top: var(--linea-2);
  border-radius: 0 0 var(--r-3) var(--r-3); box-shadow: var(--sombra-barra); }
.hoja-pie .tot { font: 600 var(--t-5)/1 var(--f-cond); white-space: nowrap; }
.hoja-pie .tot small { font: 500 var(--t-1)/1 var(--f-texto); color: var(--tinta-3); margin-left: 2px; }
.hoja-pie .tot-r { display: block; font: 600 var(--t-1)/1.2 var(--f-cond); text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-3); margin-bottom: 4px; }
.hoja-pie .otras { grid-column: 1 / -1; display: flex; gap: var(--e-2); align-items: center; }
.hoja-pie .otras .btn.peligro { margin-left: auto; border-color: transparent; background: none; }
@media (hover: hover) { .hoja-pie .otras .btn.peligro:hover { background: var(--e-fondo); } }
#btnEnviar { min-width: 180px; }
#btnEnviar:disabled { opacity: .6; cursor: progress; }

/* renglones del pedido */
.linea { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--e-1) var(--e-3); align-items: center;
  padding: var(--e-3) 0; border-bottom: var(--linea); }
.linea .info { min-width: 0; }
.linea .desc { font-weight: 500; overflow-wrap: anywhere; }
.linea .cod { font-size: var(--t-1); color: var(--tinta-3); margin-top: 2px; }
.linea .cod b { font: 600 var(--t-2)/1 var(--f-cond); color: var(--tinta); }
.linea .stepper .ic { width: 15px; height: 15px; }
.linea .quitar { border: 0; background: none; padding: 0 var(--e-1); min-height: 34px; color: var(--e-tinta);
  font-size: var(--t-2); font-weight: 500; cursor: pointer; }
.linea .quitar:hover { text-decoration: underline; }
#totalPedido { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); padding: var(--e-3) 0 var(--e-1);
  font: 600 var(--t-4)/1.2 var(--f-cond); }
#totalPedido .r { font: 600 var(--t-1)/1.2 var(--f-cond); text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); }
#totalPedido .v small { font: 500 var(--t-1)/1 var(--f-texto); color: var(--tinta-3); margin-left: 2px; }
#totalPedido .nota-cons { display: block; flex-basis: 100%; font: 500 var(--t-1)/1.3 var(--f-texto); color: var(--d-tinta); text-align: right; }
#totalPedido { flex-wrap: wrap; }
.notaPedido { font-size: var(--t-2); color: var(--tinta-2); padding: var(--e-2) var(--e-3); background: var(--plancha-2);
  border-radius: var(--r-2); margin-top: var(--e-2); }
.sec-titulo { font: 600 var(--t-1)/1.2 var(--f-cond); text-transform: uppercase; letter-spacing: .1em; color: var(--navy-3);
  margin: var(--e-5) 0 var(--e-3); padding-top: var(--e-4); border-top: var(--linea); }
.form-pedido { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
.form-pedido .ancho { grid-column: 1 / -1; }
.form-pedido select.entrada { cursor: pointer; }
.entrada.invalido { border-color: var(--e-punto); }
.entrada.invalido:focus { outline-color: var(--e-punto); }
.err { display: none; color: var(--e-tinta); font-size: var(--t-1); }
#errorPedido { display: none; margin-top: var(--e-4); padding: var(--e-3) var(--e-4); border-radius: var(--r-2);
  background: var(--e-fondo); color: var(--e-tinta); font-size: var(--t-2); white-space: pre-line; }

/* pedido enviado */
.hoja.ok { max-width: 460px; text-align: center; padding: var(--e-6) var(--e-5) var(--e-5); }
.ok-marca { width: 56px; height: 56px; margin: 0 auto var(--e-3); border-radius: 50%; display: grid; place-items: center;
  background: var(--o-fondo); color: var(--o-tinta); }
.ok-marca .ic { width: 28px; height: 28px; stroke-width: 2.6; }
.hoja.ok p { color: var(--tinta-2); margin-top: var(--e-2); }
.hoja.ok .spam { font-size: var(--t-2); color: var(--tinta-3); margin-top: var(--e-3); }
.hoja.ok .btn { margin-top: var(--e-5); }

/* visor de foto */
#visor { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 16, 28, .88); cursor: zoom-out; visibility: hidden; opacity: 0; transition: opacity .18s, visibility .18s; }
#visor.visible { visibility: visible; opacity: 1; }
#visor img { max-width: 92vw; max-height: 82vh; border-radius: var(--r-3); background: var(--blanco); }
#visor .pie { position: fixed; bottom: var(--e-5); left: var(--e-4); right: var(--e-4); text-align: center;
  color: var(--blanco); font-size: var(--t-3); }
#visor .cerrar { position: fixed; top: var(--e-4); right: var(--e-4); width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--brillo-3); color: var(--blanco); display: grid; place-items: center; cursor: pointer; }

/* toast (página suelta: shell.css no se carga) */
/* centrado con left/right + margin auto (no left:50% + translate, que lo
   encogía a media pantalla). Con un diálogo abierto, toast() lo sube por
   encima del pie fijo de la hoja. */
.toast-cat { position: fixed; left: var(--e-4); right: var(--e-4); margin: 0 auto; width: max-content;
  bottom: var(--e-5); z-index: 70;
  max-width: min(560px, calc(100vw - 2 * var(--e-4))); padding: var(--e-3) var(--e-4); background: var(--navy);
  color: var(--blanco); border-radius: var(--r-3); box-shadow: var(--sombra-pop); font: 500 var(--t-2)/1.35 var(--f-texto);
  text-align: center; opacity: 0; transition: opacity .25s; pointer-events: none; }
.toast-cat.visible { opacity: 1; }

/* ===== Corte 1: ancho (≥ 1280): el pedido pasa a columna al costado ===== */
@media (min-width: 1280px) {
  .mue-lay { grid-template-columns: minmax(0, 1fr) 300px; }
  .pedido { display: block; order: 0; top: var(--e-4); bottom: auto; box-shadow: none; }
  .pedido .plancha-cab { border-bottom: var(--linea); }
  .pedido .pedido-vacio:not([hidden]) { display: grid; }
  .pedido .pedido-lista, .pedido .ped-nota { display: block; }
  .pedido .ped-total .rotulo { display: inline; }
  .ped-total { justify-content: space-between; border-top: var(--linea-2); }
  .ped-acc { padding: 0 var(--e-4) var(--e-4); }
}

/* ===== Corte 2: celular y tablet (≤ 900) ===== */
@media (max-width: 900px) {
  .mue-top-in { padding: 0 var(--e-4); }
  .mue-vend .expl { display: none; }
  /* sin el encabezado de la grilla, la medida dice cuál es cuál */
  .gr-meta .med::before { content: "Medidas: "; color: var(--tinta-3); font-weight: 400; }
  .gr-meta .med.tres::before { content: "An × Al × Pr: "; }
  .mue-main { padding: var(--e-4) var(--e-4) calc(96px + env(safe-area-inset-bottom)); }
  .cat-cab h1 { font-size: var(--t-4); margin-top: 4px; }
  /* el buscador queda fijo arriba; las marcas en UNA fila que se desliza
     (▾ las despliega) y se esconden al bajar, como antes */
  .cat-fija { border-radius: 0; box-shadow: var(--sombra-paso); }
  .pedido { display: none; }
  .cat-herr { padding: var(--e-2) var(--e-4); }
  .cat-herr .buscar-local, .orden-wrap select { height: 44px; }
  .cat-herr .buscar-local input { font-size: var(--t-campo-cel); }
  .orden-wrap select { max-width: 132px; }
  .cats-wrap { padding: 0 var(--e-4) var(--e-2); position: relative; }
  .cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .cats::-webkit-scrollbar { display: none; }
  .cats .seg { flex: none; }
  .cats-wrap::after { content: ""; position: absolute; right: calc(var(--e-4) + 52px); top: 0; bottom: var(--e-2); width: 32px;
    pointer-events: none; background: linear-gradient(90deg, transparent, var(--plancha)); }
  .cats-wrap.expandido::after { display: none; }
  .cats-wrap.expandido .cats { flex-wrap: wrap; overflow: visible; }
  .btn-cats { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: var(--linea-2);
    border-radius: var(--r-2); background: var(--plancha); color: var(--tinta-2); cursor: pointer; }
  .btn-cats .ic { transition: transform .2s; }
  .cats-wrap.expandido .btn-cats .ic { transform: rotate(180deg); }
  .cat-fija.compacta .cats-wrap { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
  .mue-lista { border-left: 0; border-right: 0; border-radius: 0; margin: 0 calc(-1 * var(--e-4)); }
  .grilla.muebles .gr-grupo { scroll-margin-top: 130px; }
  /* las filas se doblan en ficha: foto · título / stock y precio / cantidad */
  .grilla.muebles .gr.enc { display: none; }
  .grilla.muebles .gr:not(.enc) { grid-template-columns: 76px minmax(0, 1fr) auto;
    grid-template-areas: "sil tit tit" "sil disp precio" "sil . step"; row-gap: 6px; padding: var(--e-3) var(--e-4); align-items: center; }
  .grilla.muebles .c-sil { grid-area: sil; align-self: start; }
  .grilla.muebles .c-tit { grid-area: tit; }
  .grilla.muebles .c-disp { grid-area: disp; justify-self: start; }
  .grilla.muebles .c-precio { grid-area: precio; }
  .grilla.muebles .c-step { grid-area: step; }
  .foto-m, .foto-vacia { width: 76px; height: 76px; }
  /* .corte no se abre con el dedo: en el celular el título va en 2 líneas */
  .grilla.muebles .corte { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .grilla.muebles .corte::after { display: none; }
  .grilla.muebles .corte > span { display: inline; }
  .grilla.muebles .corte:hover > span { position: static; padding: 0; border: 0; box-shadow: none; background: none; width: auto; max-width: none; }
  .stepper { grid-template-columns: 44px 48px 44px; height: 44px; }
  .sk::before { width: 76px; height: 76px; top: 4px; }
  .sk { height: 100px; }
  /* barra fija del pulgar */
  .fija-cel { padding: var(--e-2) var(--e-4) calc(var(--e-2) + env(safe-area-inset-bottom)); }
  .fija-cel .que { max-width: none; flex: 1; font-size: var(--t-2); line-height: 1.25; }
  .fija-cel .que b { display: block; font: 600 var(--t-4)/1.15 var(--f-cond); color: var(--tinta); }
  .fija-cel .que b small { font: 500 var(--t-1)/1 var(--f-texto); color: var(--tinta-3); margin-left: 2px; }
  .fija-cel .btn.principal { flex: none; }
  .toast-cat { bottom: calc(80px + env(safe-area-inset-bottom)); }
  /* el pedido ocupa la pantalla, con total y Enviar siempre abajo */
  .hoja { margin: 0; min-height: 100%; border-radius: 0; display: flex; flex-direction: column; }
  .hoja-cuerpo { flex: 1; padding: var(--e-2) var(--e-4) var(--e-5); }
  .hoja-cab { padding-left: var(--e-4); border-radius: 0; }
  .hoja-cab .btn-ic { width: 44px; height: 44px; }
  .hoja-pie { border-radius: 0; padding: var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom)); }
  /* Vaciar no queda bajo el pulgar que tocó "Ver pedido" (abajo a la
     derecha): va a la izquierda y "Seguir agregando" a la derecha */
  .hoja-pie .otras .btn.peligro { order: -1; margin-left: 0; }
  .hoja-pie .otras .btn.seguir { margin-left: auto; }
  .hoja.ok { min-height: 0; margin: var(--e-7) var(--e-4); border-radius: var(--r-3); display: block; }
  .entrada { height: 44px; font-size: var(--t-campo-cel); }
  textarea.entrada { height: auto; }
  .linea .quitar { min-height: 44px; }
}

/* ===== Corte 3: celular angosto (≤ 640) ===== */
@media (max-width: 640px) {
  .form-pedido { grid-template-columns: minmax(0, 1fr); }
  .linea { grid-template-columns: minmax(0, 1fr) auto; }
  .linea .info { grid-column: 1 / -1; }
  .linea .stepper { justify-self: start; }
  .hoja-pie .tot { font-size: var(--t-4); }
  #btnEnviar { min-width: 0; padding: 0 var(--e-4); }
  .mue-nombre { font-size: var(--t-3); }
  /* modo vendedor: quién vende va en su propia franja, abajo de la marca */
  .mue-top-in:has(.mue-vend) { flex-wrap: wrap; row-gap: var(--e-1); padding-top: var(--e-2); }
  .mue-vend { flex-basis: 100%; margin-left: 0; flex-wrap: nowrap; justify-content: space-between;
    padding: var(--e-1) 0 var(--e-2); border-top: 1px solid var(--brillo); }
  .mue-vend > .vend-txt { display: grid; min-width: 0; }
  .mue-vend .quien { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* la aclaración vuelve en una segunda línea chica (el celular es el uso
     principal del vendedor) */
  .mue-vend .expl { display: block; font-size: var(--t-1); line-height: 1.3; }
  .mue-vend .expl .sep { display: none; }
  .mue-vend a { flex: none; min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .sk::after, .ped-total .v.pulso, .fija-cel .pulso { animation: none; }
}