/**
 * La ventana de cantidades y sus contadores.
 *
 * Va aparte del resto porque la usan dos páginas, «Mis diseños» y el editor, y
 * tiene que verse igual en las dos.
 */

.mch-sin-scroll{ overflow:hidden; }

.mch-velo{
  position:fixed; inset:0; z-index:1200;
  background:rgba(10,25,40,.55);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.mch-ventana{
  background:#fff; border-radius:16px; width:100%; max-width:520px;
  max-height:90vh; overflow:auto; box-shadow:0 12px 30px rgba(15,45,75,.3);
  color:#232323;
}

.mch-vcab{ display:flex; align-items:center; gap:14px; padding:18px 20px; border-bottom:1px solid #e8eef4; }
.mch-vqui{ flex:1; min-width:0; }
.mch-vcab h2{ margin:0; font-size:1.05rem; color:#004776; }
.mch-vsub{ margin:2px 0 0; font-size:.79rem; color:#7a8794; }
.mch-vcerrar{
  background:none; border:0; font-size:1.6rem; line-height:1; color:#7a8794;
  cursor:pointer; padding:0 4px;
}
.mch-vcerrar:hover{ color:#232323; }

.mch-vcuerpo{ padding:18px 20px; display:grid; gap:14px; }
.mch-vnota{ margin:0; font-size:.79rem; color:#7a8794; }

.mch-vpie{
  padding:16px 20px; border-top:1px solid #e8eef4;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.mch-vcuenta{ flex:1; min-width:120px; font-size:.79rem; color:#7a8794; }
/* ===== los botones del editor de chapas =====
 *
 * Van definidos aquí, y no heredados del tema, por una razón práctica: la
 * ventana cuelga del body, fuera de #content, así que los estilos de la tienda
 * no le llegan y salía un botón distinto al de la página que lo abrió.
 *
 * Y ya que hay que escribirlos, valen para los dos sitios: el mismo azul, el
 * mismo redondeo y sin las mayúsculas forzadas, para que todos los botones de
 * estas pantallas se vean como uno solo.
 */
.mch-vsecundario,
.mch-vguardar,
.mch-cab .btn-primary,
.mch-gal .btn-primary{
  border-radius:10px; padding:11px 19px; font-size:.94rem; font-weight:700;
  line-height:1.25; cursor:pointer; text-transform:none; letter-spacing:0;
}
.mch-vsecundario{ background:#fff; color:#004776; border:1px solid #cddced; }
.mch-vsecundario:hover{ border-color:#0068ae; color:#0068ae; }

.mch-vguardar,
.mch-cab .btn-primary,
.mch-gal .btn-primary{
  background:#0068ae; color:#fff; border:1px solid #0068ae;
  font-weight:800; box-shadow:0 2px 8px rgba(0,104,174,.3);
}
.mch-vguardar:hover:not([disabled]),
.mch-cab .btn-primary:hover,
.mch-cab .btn-primary:focus,
.mch-gal .btn-primary:hover,
.mch-gal .btn-primary:focus{
  background:#005791; border-color:#005791; color:#fff;
}
.mch-vguardar[disabled]{
  background:#c3ccd4; border-color:#c3ccd4; box-shadow:none; cursor:not-allowed;
}

/* ===== contadores ===== */
.mch-steps{ display:grid; gap:8px; }
/* Rejilla y no caja flexible: la última columna lleva a veces «de 8» y a veces
   «no compró», y con anchos automáticos cada fila colocaba los botones en un
   sitio distinto. Con las tres columnas fijas, los contadores caen en la misma
   vertical en las seis filas. */
.mch-step{
  display:grid; grid-template-columns:1fr auto 74px; align-items:center; gap:10px;
  border:1px solid #e8eef4; border-radius:11px; padding:8px 10px; background:#fafcfe;
}
.mch-step[data-cero="no"]{ background:#eef6fc; border-color:#cddced; }
.mch-squi{ flex:1; min-width:0; display:grid; }
.mch-st{ font-weight:700; font-size:.86rem; color:#004776; }
.mch-sd{ font-size:.72rem; color:#7a8794; }
.mch-smandos{ display:flex; align-items:center; gap:6px; }
.mch-sbtn{
  width:34px; height:34px; border-radius:9px; border:1px solid #cddced; background:#fff;
  color:#004776; font-weight:800; font-size:1.05rem; line-height:1; cursor:pointer;
}
.mch-sbtn:hover:not([disabled]){ border-color:#0068ae; color:#0068ae; }
.mch-sbtn[disabled]{ opacity:.35; cursor:not-allowed; }
.mch-sn{ min-width:26px; text-align:center; font-weight:800; color:#004776; }
/* A la izquierda de su columna: «de 8» y «no compró» miden distinto, y alineados
   a la derecha cada uno empezaba en un sitio. */
.mch-stope{ font-size:.68rem; color:#7a8794; text-align:left; line-height:1.35; }
/* Comprando no hay topes que explicar: fuera la tercera columna. */
.mch-steps.mch-sin-topes .mch-step{ grid-template-columns:1fr auto; }
.mch-steps.mch-sin-topes .mch-stope{ display:none; }
/* Dónde están las que faltan. Solo aparece cuando hay algo que explicar. */
.mch-sotros{ display:block; }
.mch-sotros.mch-lleno{ color:#8a5c12; font-weight:700; }