/* MJ Parfums · el panel
   Se usa de pie y desde el celular, así que todo lo que se toca es grande.
   Mismo lienzo blanco que la tienda. */

body.panel{padding-bottom:5rem}
@media(min-width:900px){body.panel{padding-bottom:0}}

/* ---------- acceso ---------- */

.acceso{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:1.5rem 1.2rem}
.acceso-caja{width:100%;max-width:22rem;text-align:center}
.acceso-caja h1{margin:0;font-size:1.15rem;font-weight:600;text-transform:uppercase;letter-spacing:.28em}
.acceso-caja .mayus{margin:.6rem 0 1.8rem}
.acceso-campos{display:flex;flex-direction:column;gap:.8rem;text-align:left}

/* ---------- armazón ----------
   SIN backdrop-filter en ninguna capa fija. Habia tres (cabecera, pestañas y
   barra de cobro) y son lo que tiraba los fps al hacer scroll en un telefono
   de gama baja: el navegador tiene que volver a desenfocar el fondo en cada
   cuadro. Los fondos ya iban al 90-96% de opacidad, asi que ponerlos solidos
   no se nota y el scroll va suelto. */

.pcab{position:sticky;top:0;z-index:30;background:#fff;
  border-bottom:1px solid var(--linea)}
.pcab-in{display:flex;align-items:center;justify-content:space-between;gap:.8rem;height:56px}
.pcab-n{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.22em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcab-quien{font-size:.68rem;color:var(--tinta3)}
.pcab-acc{display:flex;align-items:center;gap:.4rem;flex:none}

.pestanas{
  position:fixed;left:0;right:0;bottom:0;z-index:35;
  display:flex;background:#fff;
  border-top:1px solid var(--linea);
  padding-bottom:env(safe-area-inset-bottom);overflow-x:auto;
}
.pestanas::-webkit-scrollbar{height:0}
.pestanas a{
  flex:1 0 auto;min-width:4rem;display:flex;flex-direction:column;align-items:center;gap:.18rem;
  padding:.5rem .5rem .45rem;font-size:.6rem;font-weight:500;color:var(--tinta3);
}
.pestanas a[aria-current="page"]{color:var(--tinta);box-shadow:inset 0 2px 0 var(--tinta)}
@media(min-width:900px){
  .pestanas{position:sticky;top:56px;bottom:auto;border-top:0;border-bottom:1px solid var(--linea);padding-bottom:0}
  .pestanas a{flex:0 0 auto;flex-direction:row;gap:.45rem;padding:.8rem 1.1rem;font-size:.78rem}
  .pestanas a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--tinta)}
}

.pcuerpo{padding:1.4rem 0 2rem}

/* ---------- títulos y bloques ---------- */

.ptitulo{display:flex;align-items:flex-end;justify-content:space-between;gap:.9rem;flex-wrap:wrap;margin-bottom:1.1rem}
.ptitulo h1{margin:0;font-size:1.5rem;font-weight:600;letter-spacing:-.02em}
.ptitulo .mayus{margin:0 0 .25rem}

.tarjeta{background:#fff;border:1px solid var(--panel-borde);border-radius:var(--r);padding:1.1rem;box-shadow:var(--sombra)}
.tarjeta+.tarjeta{margin-top:.9rem}
.tarjeta h2{margin:0 0 .85rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.2em;
  color:var(--tinta3);font-weight:500;display:flex;align-items:center;gap:.5rem}

.malla{display:grid;gap:.9rem}
@media(min-width:760px){.malla-2{grid-template-columns:repeat(2,1fr)}}

.rejilla-campos{display:grid;gap:.75rem}
@media(min-width:620px){
  .rejilla-campos.c2{grid-template-columns:repeat(2,1fr)}
  .rejilla-campos.c3{grid-template-columns:repeat(3,1fr)}
}
.ancho-todo{grid-column:1/-1}
.etiqueta{display:block;margin-bottom:.35rem}

/* ---------- cifras ---------- */

.cifras{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
@media(min-width:700px){.cifras{grid-template-columns:repeat(4,1fr)}}
.cifra{background:#fff;border:1px solid var(--panel-borde);border-radius:var(--r);padding:.95rem;box-shadow:var(--sombra)}
.cifra-n{font-size:1.5rem;font-weight:600;line-height:1.05;letter-spacing:-.03em}
.cifra-t{font-size:.62rem;text-transform:uppercase;letter-spacing:.18em;color:var(--tinta3);margin-top:.4rem;font-weight:500}
.cifra-mal .cifra-n{color:#9F2F2D}
.cifra-bien .cifra-n{color:#346538}

/* ---------- tablas ---------- */

.marco{overflow-x:auto;border:1px solid var(--panel-borde);border-radius:var(--r);background:#fff}
table.tabla{width:100%;border-collapse:collapse;font-size:.85rem}
table.tabla th{
  text-align:left;padding:.6rem .75rem;font-size:.62rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--tinta3);font-weight:500;border-bottom:1px solid var(--linea);white-space:nowrap;
}
table.tabla td{padding:.6rem .75rem;border-bottom:1px solid var(--linea);vertical-align:middle}
table.tabla tr:last-child td{border-bottom:0}
table.tabla .der{text-align:right}
table.tabla .anulada td{opacity:.45;text-decoration:line-through}
table.tabla .anulada td:last-child{text-decoration:none;opacity:1}

/* ---------- lista del catálogo ---------- */

.pcatalogo{display:grid;gap:.7rem}
@media(min-width:820px){.pcatalogo{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1240px){.pcatalogo{grid-template-columns:repeat(3,1fr)}}

.pitem{display:flex;gap:.8rem;background:#fff;border:1px solid var(--panel-borde);
  border-radius:var(--r);padding:.7rem;box-shadow:var(--sombra);
  /* el panel se maneja desde el celular y esta lista es lo mas largo que hay:
     el navegador se salta el dibujado de lo que no se ve y el scroll va suelto */
  content-visibility:auto;contain-intrinsic-size:auto 116px}
.pitem-foto{width:3.6rem;height:4.5rem;flex:none;border-radius:var(--r-sm);overflow:hidden;
  background:#F4F2EF;display:flex;align-items:center;justify-content:center}
.pitem-foto img{width:100%;height:100%;object-fit:cover}
.pitem-cuerpo{flex:1;min-width:0}
.pitem-marca{font-size:.68rem;color:var(--tinta3)}
.pitem-nom{font-size:.9rem;font-weight:600;line-height:1.25;margin-top:.1rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pitem-precios{font-size:.75rem;color:var(--tinta2);margin-top:.2rem}
.pitem-marbetes{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.4rem}
.pitem-acc{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.55rem}
.pitem-acc .b{padding:.34rem .7rem;font-size:.72rem}
.pitem-acc form{display:inline-flex}

.marbete{display:inline-block;padding:.15rem .5rem;font-size:.62rem;font-weight:500;
  border-radius:999px;letter-spacing:.04em}
.marbete-nuevo{background:#E1F3FE;color:#1F6C9F}
.marbete-rebaja{background:#FDEBEC;color:#9F2F2D}
.marbete-agotado{background:#F1EFEC;color:var(--tinta2)}
.marbete-sellado{background:#EDF3EC;color:#346538}

/* el stock, dentro de la propia tarjeta del catálogo */
.pitem-stock{margin-top:.5rem}
.stock-fila{display:flex;align-items:center;gap:.4rem;margin-top:.4rem}
.stock-hay{flex:1;min-width:0;font-size:.72rem;color:var(--tinta2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stock-hay.poco{color:#B5563F;font-weight:500}
.stock-n{width:4.4rem;flex:none;padding:.35rem .5rem;font-size:.78rem}
.stock-fila .b{padding:.4rem .6rem;flex:none}

.medidor{height:4px;border-radius:999px;background:#EFEDEA;overflow:hidden;margin-top:.45rem}
.medidor i{display:block;height:100%;border-radius:999px;background:var(--tinta)}
.medidor-bajo i{background:#B5563F}

/* ---------- vender ----------
   Una baldosa por medida. Se toca y suma; se vuelve a tocar y va 2, 3, 4.
   Lo que llevas se ve en la propia baldosa, en verde: no hay carrito aparte
   que mirar ni formulario que llenar. */

.baldosas{display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem;padding-bottom:5.5rem}
@media(min-width:640px){.baldosas{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.baldosas{grid-template-columns:repeat(4,1fr);padding-bottom:6rem}}

.baldosa{
  content-visibility:auto;contain-intrinsic-size:auto 78px;
  position:relative;display:flex;flex-direction:column;gap:.12rem;
  text-align:left;padding:.75rem .7rem .8rem;cursor:pointer;
  background:#fff;border:1.5px solid var(--panel-borde);border-radius:var(--r);
  box-shadow:var(--sombra);
  transition:border-color .15s var(--rapido),background-color .15s var(--rapido),transform .12s var(--suave);
}
.baldosa:active{transform:scale(.97)}
.baldosa-n{font-size:.85rem;font-weight:600;line-height:1.25}
.baldosa-m{font-size:.68rem;color:var(--tinta3)}
.baldosa-p{font-size:.82rem;font-weight:600;margin-top:.3rem}

/* elegida: se pone verde y enseña cuántas van */
.baldosa.puesta{border-color:var(--verde);background:var(--verde-suave)}
.baldosa.puesta .baldosa-p{color:var(--verde)}
.baldosa-cuenta{
  position:absolute;top:-.5rem;right:-.5rem;
  min-width:1.65rem;height:1.65rem;padding:0 .35rem;border-radius:999px;
  background:var(--verde);color:#fff;
  font-size:.85rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px -3px rgba(47,125,79,.7);
}
.baldosa-menos{
  position:absolute;top:-.5rem;left:-.5rem;
  width:1.65rem;height:1.65rem;border-radius:999px;
  background:#fff;border:1.5px solid var(--panel-borde);color:var(--rojo);
  font-size:1rem;font-weight:600;line-height:1;
  display:flex;align-items:center;justify-content:center;
}

/* ---------- la barra de cobro ---------- */

.cobro{
  position:fixed;left:.7rem;right:.7rem;bottom:4.4rem;z-index:40;
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem .6rem .55rem .5rem;
  background:#fff;
  border:1px solid var(--panel-borde);border-radius:999px;
  box-shadow:0 12px 34px -12px rgba(17,17,16,.42);
}
@media(min-width:900px){.cobro{left:auto;right:2rem;bottom:2rem;min-width:22rem}}
.cobro-x{
  width:2.1rem;height:2.1rem;flex:none;border-radius:999px;cursor:pointer;
  border:1px solid var(--panel-borde);background:#fff;color:var(--rojo);
  font-size:1.25rem;line-height:1;
}
.cobro-x:hover{background:var(--rojo-suave)}
.cobro-txt{flex:1;min-width:0;font-size:.8rem;color:var(--tinta2);line-height:1.25;white-space:nowrap}
.cobro-txt b{font-size:.8rem;color:var(--tinta2);font-weight:400}
.cobro-txt em{display:block;font-style:normal;font-size:1.05rem;font-weight:600;color:var(--tinta)}

/* ---------- la hoja del pago ---------- */

.hoja-velo{position:fixed;inset:0;z-index:60;background:rgba(17,17,16,.45)}
.hoja{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  padding:1.4rem 1.2rem calc(1.6rem + env(safe-area-inset-bottom));
  background:#fff;border-radius:1.4rem 1.4rem 0 0;
  box-shadow:0 -20px 50px -20px rgba(17,17,16,.4);
  text-align:center;
}
@media(min-width:640px){
  .hoja{left:50%;right:auto;bottom:1.5rem;transform:translateX(-50%);
    width:22rem;border-radius:1.4rem}
}
.hoja-t{margin:0;font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:var(--tinta3)}
.hoja-bs{margin:.3rem 0 1.1rem;font-size:2rem;font-weight:600;letter-spacing:-.03em}
.hoja-botones{display:flex;flex-direction:column;gap:.5rem}
.hoja-botones .b{padding:1rem 1.5rem;font-size:1rem}

/* ---------- promos ---------- */

.promo-taller{display:grid;gap:1rem}
@media(min-width:960px){.promo-taller{grid-template-columns:minmax(0,20rem) minmax(0,1fr);align-items:start}}
.promo-vista{background:#fff;border:1px solid var(--panel-borde);border-radius:var(--r);padding:.7rem;box-shadow:var(--sombra)}
@media(min-width:960px){.promo-vista{position:sticky;top:8rem}}
.promo-vista img{width:100%;border-radius:var(--r-sm)}
.promo-hechas{display:grid;grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));gap:.6rem}
.promo-hechas figure{margin:0;background:#fff;border:1px solid var(--panel-borde);
  border-radius:var(--r-sm);overflow:hidden}
.promo-hechas img{width:100%;display:block}
.promo-hechas figcaption{padding:.45rem .55rem;font-size:.65rem;color:var(--tinta3);
  display:flex;justify-content:space-between;gap:.4rem;align-items:center}

/* ---------- varios ---------- */

.fila-acc{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.pie-nota{font-size:.75rem;color:var(--tinta3);margin:.5rem 0 0;line-height:1.5}
.vacio{padding:2.2rem 1.1rem;text-align:center;color:var(--tinta3);
  border:1px dashed var(--linea);border-radius:var(--r);font-size:.85rem}
.sep{height:1px;background:var(--linea);margin:1rem 0;border:0}
details.plegable{border:1px solid var(--panel-borde);border-radius:var(--r);background:#fff}
details.plegable>summary{padding:.8rem 1rem;cursor:pointer;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.18em;font-weight:500;color:var(--tinta2);list-style:none;display:flex;align-items:center;gap:.55rem}
details.plegable>summary::-webkit-details-marker{display:none}
details.plegable>div{padding:0 1rem 1rem}

.foto-vista{display:flex;gap:.8rem;align-items:flex-start;flex-wrap:wrap}
.foto-vista .marco-foto{width:7rem;height:8.75rem;border-radius:var(--r-sm);overflow:hidden;
  background:#F4F2EF;flex:none;display:flex;align-items:center;justify-content:center}
.foto-vista .marco-foto img{width:100%;height:100%;object-fit:cover}

.aviso{display:flex;gap:.6rem;align-items:flex-start;padding:.7rem .9rem;border-radius:var(--r-sm);font-size:.85rem}
.aviso-bien{background:#EDF3EC;color:#346538}
.aviso-mal{background:#FDEBEC;color:#9F2F2D}
.aviso-ojo{background:#FBF3DB;color:#956400}

.b-mal{background:#fff;color:#9F2F2D;border-color:rgba(159,47,45,.28)}
.b-mal:hover{background:#FDEBEC}

/* ---------- formas de pago, en botones ---------- */
.pagos{display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem;margin:.9rem 0}
.pago{position:relative;display:block}
.pago input{position:absolute;opacity:0;width:0;height:0}
.pago span{
  display:block;text-align:center;padding:.55rem .4rem;border-radius:999px;
  border:1px solid var(--panel-borde);background:#fff;
  font-size:.78rem;color:var(--tinta2);cursor:pointer;
  transition:background-color .16s var(--rapido),border-color .16s var(--rapido),color .16s var(--rapido);
}
.pago input:checked + span{background:var(--tinta);border-color:var(--tinta);color:#fff}
.pago input:focus-visible + span{outline:2px solid var(--tinta);outline-offset:2px}

.plegable-fino>summary{padding:.6rem .8rem;font-size:.72rem;letter-spacing:.1em;text-transform:none}
.plegable-fino>div{padding:0 .8rem .8rem}
.descargas{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}

/* ---------- el selector de colores ----------
   El dueño toca una combinación y ve el resultado ahí mismo, antes de
   guardar. Sin esto tendría que guardar, salir a la tienda y volver. */

.paletas{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
@media(min-width:620px){.paletas{grid-template-columns:repeat(3,1fr)}}
.paleta{
  display:flex;align-items:center;gap:.55rem;
  padding:.5rem .6rem;cursor:pointer;
  background:#fff;border:1.5px solid var(--panel-borde);border-radius:999px;
  transition:border-color .16s var(--rapido);
}
.paleta:hover{border-color:rgba(17,17,16,.26)}
.paleta.elegida{border-color:var(--tinta)}
.paleta-tonos{display:flex;flex:none}
.paleta-tonos i{width:1.05rem;height:1.05rem;border-radius:999px;border:2px solid #fff}
.paleta-tonos i+i{margin-left:-.42rem}
.paleta-n{font-size:.75rem;color:var(--tinta2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.color-fila{display:flex;align-items:center;gap:.55rem}
.color-caja{
  width:2.8rem;height:2.4rem;flex:none;padding:0;cursor:pointer;
  border:1px solid var(--panel-borde);border-radius:var(--r-sm);background:#fff;
}
.color-caja::-webkit-color-swatch-wrapper{padding:.22rem}
.color-caja::-webkit-color-swatch{border:0;border-radius:.4rem}
.color-hex{font-size:.78rem;color:var(--tinta2);text-transform:uppercase}

.color-prueba{
  margin-top:.9rem;padding:.9rem 1rem;
  border:1px dashed var(--linea);border-radius:var(--r);background:#fff;
}
.color-prueba-fila{display:flex;align-items:center;gap:.8rem;margin-top:.6rem;flex-wrap:wrap}
.color-prueba .b[disabled]{opacity:1;cursor:default}
.color-prueba-precio{font-size:1.1rem;font-weight:600;color:var(--marca)}

/* ---------- la guía y cómo instalar la app ---------- */
.guia-paso{margin-top:.95rem;padding-top:.9rem;border-top:1px solid var(--linea)}
.guia-paso h3{margin:0 0 .55rem;font-size:.82rem;font-weight:600}
.lista-pasos{margin:0;padding:0;list-style:none;counter-reset:g}
.lista-pasos li{counter-increment:g;position:relative;padding-left:1.75rem;
  margin-bottom:.5rem;font-size:.85rem;line-height:1.45;color:var(--tinta2)}
.lista-pasos li::before{content:counter(g);position:absolute;left:0;top:.1rem;
  width:1.2rem;height:1.2rem;border-radius:999px;
  background:var(--marca);color:var(--marca-texto);
  font-size:.66rem;font-weight:600;
  display:flex;align-items:center;justify-content:center}
.lista-pasos b{color:var(--tinta);font-weight:600}

/* ---------- buscador de fotos ----------
   Se escribe el nombre y salen las fotos para tocar la que sirve, en vez de
   irse a otra pagina a copiar el enlace a mano. */
.buscafotos{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--linea)}
.busca-fila{display:flex;gap:.45rem;align-items:center}
.busca-fila .campo{flex:1;min-width:0}
.busca-fila .b{flex:none;white-space:nowrap}
.busca-rejilla{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.7rem;
}
@media(min-width:560px){.busca-rejilla{grid-template-columns:repeat(4,1fr)}}
@media(min-width:900px){.busca-rejilla{grid-template-columns:repeat(6,1fr)}}
.busca-foto{
  display:flex;flex-direction:column;gap:.25rem;padding:.3rem;cursor:pointer;
  background:#fff;border:1.5px solid var(--panel-borde);border-radius:var(--r-sm);
  text-align:left;
  transition:border-color .15s var(--rapido),transform .12s var(--suave);
}
.busca-foto:active{transform:scale(.97)}
.busca-foto img{
  width:100%;aspect-ratio:1/1;object-fit:contain;background:#F7F6F4;
  border-radius:calc(var(--r-sm) - 2px);
}
.busca-t{
  font-size:.6rem;line-height:1.2;color:var(--tinta2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.busca-foto.elegida{border-color:var(--verde);background:var(--verde-suave)}
.busca-foto.elegida .busca-t{color:var(--verde);font-weight:600}

/* ---------- stock de un toque ----------
   Las cantidades de siempre como botones. Antes habia que tocar el campo,
   esperar el teclado, escribir y darle al mas: cuatro pasos para lo que se
   hace a diario. */
.stock-rapido{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.45rem}
.stock-rapido .b{padding:.42rem .62rem;font-size:.72rem;flex:none}

/* ---------- secciones del catálogo ----------
   Diseñador, árabes, sellados, agotados. Filtran al momento. */
.ptitulo-acc{display:flex;gap:.45rem;flex-wrap:wrap}
.secciones{display:flex;gap:.4rem;overflow-x:auto;padding:0 0 .2rem;margin-bottom:.9rem;
  -webkit-overflow-scrolling:touch}
.secciones::-webkit-scrollbar{height:0}
.seccion{
  flex:none;display:inline-flex;align-items:center;gap:.35rem;
  padding:.45rem .8rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--panel-borde);background:#fff;color:var(--tinta2);
  font-size:.76rem;font-weight:500;white-space:nowrap;
  transition:background-color .15s var(--rapido),color .15s var(--rapido),border-color .15s var(--rapido);
}
.seccion-n{font-size:.66rem;font-weight:600;padding:.05rem .34rem;border-radius:999px;
  background:rgba(17,17,16,.07)}
.seccion[aria-selected="true"]{background:var(--marca);border-color:var(--marca);color:var(--marca-texto)}
.seccion[aria-selected="true"] .seccion-n{background:rgba(255,255,255,.25)}

/* ---------- ordenar el catálogo ----------
   Lista pelada a propósito: sin fotos grandes ni botones en los que se pueda
   tocar por error. Eso es lo que la hace ir suelta en un celular. */
.ordenar-caja{border:1px solid var(--panel-borde);border-radius:var(--r);background:#fff;
  box-shadow:var(--sombra);overflow:hidden}
.ordenar{list-style:none;margin:0;padding:0}
.ord-fila{
  display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;
  border-bottom:1px solid var(--linea);background:#fff;
  /* sin content-visibility aquí: al arrastrar hay que medir todas las filas */
}
.ord-fila:last-child{border-bottom:0}
.ord-agarre{
  flex:none;width:2rem;height:2.2rem;display:flex;align-items:center;justify-content:center;
  color:var(--tinta3);cursor:grab;
  /* imprescindible: sin esto el dedo arrastra la página en vez de la fila */
  touch-action:none;
}
.ord-agarre:active{cursor:grabbing}
.ord-foto{flex:none;width:2.1rem;height:2.6rem;border-radius:var(--r-sm);overflow:hidden;background:#F4F2EF}
.ord-foto img{width:100%;height:100%;object-fit:cover}
.ord-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.ord-txt b{font-size:.82rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ord-txt small{font-size:.66rem;color:var(--tinta3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ord-arriba{
  flex:none;padding:.4rem .6rem;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid var(--panel-borde);background:#fff;color:var(--tinta2);
  font-size:.8rem;line-height:1;font-weight:600;
}
.ord-arriba:active{background:var(--gris)}
.ord-cogido{background:var(--marca-suave);box-shadow:0 8px 20px -10px rgba(17,17,16,.45);
  position:relative;z-index:2}
.ord-hecho{background:var(--verde-suave)}

/* ---------- recto y sin seleccionar ----------
   Dos quejas del dueño, las dos del celular:

   1. "que no se pueda mover a los lados": el panel dejaba hacer zoom con dos
      dedos y, con el zoom puesto, la página se iba de lado y el contenido se
      salía. El zoom ya está desactivado en el <meta viewport>; esto es el
      cinturón de seguridad por si algo interno se pasa de ancho.
   2. "cuando le da al de mover se selecciona todo como si fuera a copiar": al
      arrastrar una fila el navegador pintaba el texto de azul. Se quita la
      selección en todo el panel MENOS en los campos de escribir, que ahí sí
      hace falta poder marcar y corregir. */
html{overflow-x:hidden}
body.panel{
  overflow-x:hidden;
  max-width:100%;
  touch-action:manipulation;          /* mata el zoom por doble toque */
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;         /* ni el menú de "copiar" al dejar el dedo */
}
body.panel input,
body.panel textarea,
body.panel select{
  -webkit-user-select:text;user-select:text;
}

/* la casilla de "también lo vendo sellado" */
.casilla{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;
  padding:.7rem;border:1px solid var(--panel-borde);border-radius:var(--r-sm);background:var(--gris)}
.casilla input{margin-top:.15rem;width:1.1rem;height:1.1rem;flex:none;accent-color:var(--marca)}
.casilla small{color:var(--tinta3);font-size:.75rem;line-height:1.35;display:block;margin-top:.15rem}