/* ============================================================================
   Editor de chapas · Milchapitas.com

   Todo va acotado a #mch para no pelearse con el tema. Los colores salen de
   fichas propias en vez de estar escritos por ahí sueltos, porque el cliente
   puede cambiar a modo oscuro y así solo cambian las fichas.

   La MESA (el fondo oscuro tras el círculo) se queda oscura en los dos modos a
   propósito: su trabajo es que se juzguen bien los colores del diseño, y eso no
   depende del gusto de nadie.
   ============================================================================ */

/* SITIO GUARDADO PARA EL EDITOR.
   El editor se pinta desde JavaScript, así que hasta que arranca este hueco
   mide cero y el pie de la tienda se queda pegado a la cabecera. Cuando el
   editor entra, el pie se va de un salto: medido el 17 sept 2026 en un móvil
   simulado con la red lenta que usa PageSpeed, eso era un CLS de 0,745 (Google
   llama malo a todo lo que pase de 0,25), y se llevaba por delante la nota de
   la página, no solo la vista.

   Las medidas son las del editor ya montado: 1.261 px en móvil, 1.521 en tablet
   y 872 en escritorio. Se quedan un poco por debajo, que sobrar es peor: dejaría
   un hueco en blanco. `editor.js` pone `mch-montado` al pintar y entonces esto
   deja de aplicar, así que después manda el alto de verdad. */
#mch:not(.mch-montado){ min-height:1240px; }
@media (min-width:641px) and (max-width:991px){ #mch:not(.mch-montado){ min-height:1500px; } }
@media (min-width:992px){ #mch:not(.mch-montado){ min-height:860px; } }

#mch{
  --brand:#0068ae;
  --brand-dark:#004776;
  --accent:#f2701b;
  --verde:#2f8f45;
  --ambar:#c8801a;
  --rojo:#c2401f;
  --shadow:0 3px 12px rgba(15,45,75,.10);
  --shadow-alto:0 12px 30px rgba(15,45,75,.16);
  --sup:#ffffff;
  --sup2:#f2f4f6;
  --sup3:#fafcfe;
  --bord:#e8eef4;
  --bord2:#cddced;
  --txt:#232323;
  --txt2:#7a8794;
  --tit:#004776;
  --verde-fondo:#eef7ee; --verde-borde:#cfe6d3; --verde-txt:#255c2c;

  color:var(--txt);
  font-size:16px;
  line-height:1.5;
}
#mch[data-tema="oscuro"]{
  --sup:#1d2731;
  --sup2:#141c24;
  --sup3:#1a242d;
  --bord:#2b3742;
  --bord2:#3a4a58;
  --txt:#dfe8f0;
  --txt2:#8ba4b8;
  --tit:#cfe0ee;
  --brand:#2e9be0;
  --brand-dark:#1c7cbb;
  --verde-fondo:#1b3323; --verde-borde:#2f5b3c; --verde-txt:#a8dcb6;
  --shadow:0 3px 12px rgba(0,0,0,.35);
  --shadow-alto:0 12px 30px rgba(0,0,0,.5);
  background:var(--sup2);
  padding:18px;
  border-radius:16px;
}
#mch *{ box-sizing:border-box; }
#mch button{ font:inherit; }
#mch img{ max-width:100%; }

/* ---------- piezas ---------- */
#mch .lienzo{
  position:relative; width:100%; aspect-ratio:1/1; border-radius:50%;
  background:repeating-conic-gradient(#e7ecf1 0% 25%, #f6f8fa 0% 50%) 50%/22px 22px;
  box-shadow:var(--shadow-alto); overflow:hidden; touch-action:none; cursor:grab;
}
#mch .lienzo.arrastrando{ cursor:grabbing; }
#mch .lienzo canvas{ display:block; width:100%; height:100%; }
#mch .vacio{
  position:absolute; inset:0; display:grid; place-content:center; place-items:center; gap:8px;
  text-align:center; color:#7a8794; font-size:.86rem; padding:14px; pointer-events:none;
}
#mch .vacio svg{ width:38px; height:38px; opacity:.5; }

#mch .cal{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.78rem; font-weight:700; padding:5px 11px; border-radius:999px;
  border:1px solid transparent; white-space:nowrap;
}
#mch .cal .pip{ width:9px; height:9px; border-radius:50%; background:currentColor; flex:none; }
#mch .cal[data-n="verde"]{ color:var(--verde); background:#eaf6ec; border-color:#c9e6cf; }
#mch .cal[data-n="ambar"]{ color:var(--ambar); background:#fdf3e3; border-color:#f0dcb8; }
#mch .cal[data-n="rojo"]{ color:var(--rojo); background:#fbeae5; border-color:#f0c9bd; }
#mch .cal[data-n="nada"]{ color:#7a8794; background:#eef1f4; border-color:#dfe5eb; }

#mch .subir{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--brand); color:#fff; border:0; border-radius:10px;
  padding:13px 20px; font-weight:700; font-size:.94rem; cursor:pointer; width:100%;
  box-shadow:0 2px 8px rgba(0,104,174,.28);
}
#mch .subir:hover{ background:var(--brand-dark); color:#fff; }
#mch .subir input{ display:none; }

#mch .ctrl{ display:grid; gap:14px; }
#mch .fila{ display:grid; grid-template-columns:76px 1fr 52px; align-items:center; gap:10px; }
#mch .fila label{ font-size:.82rem; font-weight:700; color:var(--tit); margin:0; }
#mch .fila output{ font-size:.78rem; color:var(--txt2); text-align:right; font-variant-numeric:tabular-nums; }
#mch input[type=range]{ width:100%; accent-color:var(--brand); height:26px; padding:0; }
#mch .colores{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
#mch .colores button{
  width:26px; height:26px; border-radius:50%; border:2px solid var(--sup); cursor:pointer;
  box-shadow:0 0 0 1px var(--bord2); padding:0;
}
#mch .colores button[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--brand); }
#mch .colores input[type=color]{
  width:30px; height:26px; border:1px solid var(--bord2); border-radius:6px;
  background:var(--sup); padding:2px; cursor:pointer;
}

#mch .secundario{
  background:var(--sup); color:var(--tit); border:1px solid var(--bord2); border-radius:9px;
  padding:9px 14px; font-weight:700; font-size:.84rem; cursor:pointer;
}
#mch .secundario:hover{ filter:brightness(.97); color:var(--tit); }
/* también se usa como enlace (la salida de la pantalla de enviado) */
#mch a.secundario{ display:inline-flex; align-items:center; text-decoration:none; }
/* Azul de marca, igual que «Subir imagen» y que los botones de «Mis diseños»:
   el naranja aquí dentro era el único de todo el editor. */
#mch .principal{
  background:var(--brand); color:#fff; border:0; border-radius:10px;
  padding:13px 20px; font-weight:800; font-size:.95rem; cursor:pointer; width:100%;
  box-shadow:0 2px 8px rgba(0,104,174,.28);
}
#mch .principal:hover{ filter:brightness(.94); color:#fff; }
#mch .principal[disabled]{ background:#c3ccd4; box-shadow:none; cursor:not-allowed; }
#mch[data-tema="oscuro"] .principal[disabled]{ background:#39454f; color:#8ba4b8; }

#mch .pista{ font-size:.76rem; color:var(--txt2); text-align:center; margin:0; }
#mch .tarjeta{ background:var(--sup); border:1px solid var(--bord); border-radius:14px; box-shadow:var(--shadow); padding:18px; }
/* sin pedido, los formatos y «Añadir al envío» se esconden (editor.js, refrescarBotones) */
#mch .tarjeta[hidden], #mch .principal[hidden]{ display:none; }
#mch .aviso{
  margin:0; font-size:.8rem; color:var(--rojo); background:#fbeae5; border:1px solid #f0c9bd;
  border-radius:9px; padding:9px 12px; display:none;
}
#mch .aviso[data-bien="si"]{
  color:var(--verde-txt); background:var(--verde-fondo); border-color:var(--verde-borde);
}
/* La rueda de «esto tarda», a la izquierda del texto. Va en un ::before para
   que el aviso siga escribiéndose con textContent y no pueda colarse HTML. */
#mch .aviso[data-girando="si"]{ align-items:center; gap:9px; }
#mch .aviso[data-girando="si"]::before{
  content:""; flex:0 0 auto; width:14px; height:14px; border-radius:50%;
  border:2px solid currentColor; border-right-color:transparent;
  animation:mch-giro 1s linear infinite;
}
@keyframes mch-giro{ to{ transform:rotate(360deg); } }

/* la mesa: oscura siempre, para juzgar los colores del diseño */
#mch .mesa{
  background:radial-gradient(circle at 50% 38%, #2b3946 0%, #1a232c 68%);
  border-radius:12px; display:grid; place-items:center; padding:34px 18px;
}
#mch .mesa .lienzo{ box-shadow:0 18px 44px rgba(0,0,0,.5); }
/* el consejo del canto: sobre la mesa oscura, así que su color no depende del tema */
#mch .consejo{
  margin:14px 0 0; max-width:68ch; text-align:center;
  font-size:.78rem; line-height:1.55; color:#b8c6d2;
}

/* ---------- formatos ---------- */
#mch .steps{ display:grid; gap:8px; }
#mch .steps h4{ margin:0 0 2px; font-size:.82rem; color:var(--tit); font-weight:800; }
#mch .step{
  display:flex; align-items:center; gap:10px; background:var(--sup);
  border:1px solid var(--bord); border-radius:9px; padding:8px 10px;
}
#mch .step .nom{ flex:1; font-size:.85rem; font-weight:600; min-width:0; }
#mch .step .nom small{ display:block; font-weight:400; color:var(--txt2); font-size:.74rem; }
#mch .step .mas,#mch .step .menos{
  width:30px; height:30px; border-radius:8px; border:1px solid var(--bord2); background:var(--sup);
  color:var(--tit); font-weight:800; font-size:1rem; cursor:pointer; line-height:1; flex:none;
}
#mch .step .mas[disabled]{ opacity:.35; cursor:not-allowed; }
#mch .step .n{ width:30px; text-align:center; font-weight:800; font-variant-numeric:tabular-nums; flex:none; }
#mch .step[data-cero="no"]{ border-color:var(--brand); background:color-mix(in srgb, var(--brand) 9%, var(--sup)); }
#mch .total{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:var(--verde-fondo); border:1px solid var(--verde-borde); border-radius:9px; padding:9px 12px;
  font-size:.86rem; font-weight:700; color:var(--verde-txt);
}

/* ---------- cabecera ---------- */
#mch .edcab{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
#mch .edcab b{ font-size:1.05rem; color:var(--tit); }
#mch .tema{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:var(--sup); color:var(--tit); border:1px solid var(--bord2);
  border-radius:999px; padding:6px 13px; font-size:.79rem; font-weight:700;
}

/* ---------- pedido ---------- */
#mch .pedido{ display:grid; gap:10px; }
#mch .pedido h4{ margin:0; font-size:.82rem; color:var(--tit); font-weight:800; }
#mch .opciones{ display:grid; gap:8px; }
#mch .opcion{
  display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left; cursor:pointer;
  background:var(--sup); border:1px solid var(--bord); border-radius:10px; padding:11px 12px;
  color:inherit;
}
#mch .opcion:hover{ border-color:var(--bord2); background:var(--sup3); }
#mch .opcion .marca{
  width:17px; height:17px; border-radius:50%; border:2px solid var(--bord2);
  flex:none; margin-top:2px; position:relative;
}
#mch .opcion[aria-checked="true"]{ border-color:var(--brand); background:color-mix(in srgb, var(--brand) 7%, var(--sup)); }
#mch .opcion[aria-checked="true"] .marca{ border-color:var(--brand); }
#mch .opcion[aria-checked="true"] .marca::after{
  content:""; position:absolute; inset:2.5px; border-radius:50%; background:var(--brand);
}
#mch .opcion .tit{ display:block; font-size:.86rem; font-weight:700; color:var(--tit); line-height:1.3; }
#mch .opcion .sub{ display:block; font-size:.76rem; color:var(--txt2); line-height:1.35; margin-top:1px; }
#mch .opcion .listo{
  display:inline-block; margin-left:6px; font-size:.66rem; font-weight:800;
  color:var(--verde-txt); background:var(--verde-fondo); border:1px solid var(--verde-borde);
  border-radius:999px; padding:1px 7px;
}
#mch .falta{ margin:0; font-size:.8rem; font-weight:700; }
#mch .verlos{
  background:none; border:0; padding:0; cursor:pointer; text-align:left;
  font-size:.75rem; font-weight:700; color:var(--brand); text-decoration:underline;
}

/* ---------- envío ---------- */
#mch .envio{ display:grid; gap:9px; }
#mch .env-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
#mch .env-cab h4{ margin:0; font-size:.82rem; color:var(--tit); font-weight:800; }
#mch .env-cab span{ font-size:.76rem; color:var(--txt2); }
#mch .env-vacio{
  border:2px dashed var(--bord2); border-radius:11px; padding:16px; text-align:center;
  color:var(--txt2); font-size:.82rem; background:var(--sup3);
}
#mch .env-item{
  display:flex; gap:10px; align-items:center; background:var(--sup);
  border:1px solid var(--bord); border-radius:11px; padding:9px 10px;
}
#mch .env-item.editandose{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(242,112,27,.18); }
#mch .env-mini{
  width:52px; height:52px; border-radius:50%; flex:none; background:#fff; display:block;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);
}
#mch .env-txt{ flex:1; min-width:0; font-size:.83rem; font-weight:700; color:var(--tit); }
#mch .env-txt small{ display:block; font-weight:400; color:var(--txt2); font-size:.75rem; line-height:1.35; }
#mch .env-txt .peligro{ color:var(--rojo); font-weight:700; }
#mch .env-txt .marca2{ color:var(--accent); font-weight:700; }
#mch .env-txt .reut{ color:var(--brand); font-weight:700; }
#mch .env-acc{ display:flex; gap:5px; flex:none; }
#mch .env-acc button{
  border:1px solid var(--bord2); background:var(--sup); color:var(--tit); border-radius:7px;
  padding:5px 9px; font-size:.75rem; font-weight:700; cursor:pointer; line-height:1;
}
#mch .env-acc .quitar{ color:var(--rojo); border-color:#f0c9bd; }
#mch .borrador{
  display:flex; align-items:center; gap:7px; font-size:.75rem; color:var(--verde-txt);
  background:var(--verde-fondo); border:1px solid var(--verde-borde); border-radius:8px; padding:6px 10px;
}
#mch .borrador .pip{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
#mch .env-resumen{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:var(--verde-fondo); border:1px solid var(--verde-borde); border-radius:10px; padding:10px 12px;
  font-size:.86rem; font-weight:800; color:var(--verde-txt);
}
#mch .env-enviar{
  background:var(--brand); color:#fff; border:0; border-radius:9px; padding:9px 15px;
  font-weight:800; font-size:.84rem; cursor:pointer; white-space:nowrap;
}
#mch .env-enviar[disabled]{ background:#c3ccd4; cursor:not-allowed; }
#mch .env-resumen .falta-env{ color:var(--ambar); }
/* Con el aviso de lo que falta, el texto puede ser largo (seis formatos). Si no
   cabe al lado del botón, se queda con la fila entera y el botón baja; si no,
   en móvil quedaba estrujado en una columna de tres palabras. */
#mch .env-resumen.falta{ flex-wrap:wrap; }
#mch .env-resumen.falta .falta-env{ flex:1 1 16em; }
#mch .env-resumen.falta .env-enviar{ margin-left:auto; }

/* El velo de la ventana de cantidades. Repite el de cantidades.css a
   propósito: dentro del editor tiene que quedar por encima de todo. */
.mch-velo{
  position:fixed; inset:0; background:rgba(10,22,32,.55); z-index:2000;
  display:grid; place-items:center; padding:20px;
}

/* ---------- la maqueta del editor ---------- */
#mch .lay{
  display:grid; grid-template-columns:minmax(0,1fr) clamp(320px,26%,400px);
  gap:clamp(18px,2.4vw,34px); align-items:start;
}
#mch .zona{ background:var(--sup); border:1px solid var(--bord); border-radius:16px; padding:clamp(18px,2.2vw,34px); box-shadow:var(--shadow); }
#mch .zona .lienzo{ width:min(620px,100%,62vh); margin-inline:auto; }
#mch .panel{ display:grid; gap:16px; position:sticky; top:20px; }
/* las dos salidas del texto elegido: quitar arriba, aceptar abajo */
#mch .cerrar-pieza{ display:grid; gap:10px; }
#mch .empezar{ display:grid; gap:12px; }
#mch .abajo{ margin-top:22px; display:grid; gap:14px; }
@media (max-width:991px){
  #mch .lay{ grid-template-columns:1fr; }
  #mch .panel{ position:static; }
  /* 16px CLAVADOS en lo que se escribe. Safari del iPhone amplía la página él
     solo al enfocar un campo con la letra más pequeña, y al ampliarla la página
     pasa a ser más ancha que la pantalla: aparece un arrastre lateral que
     además se queda guardado para el sitio y sobrevive a recargar. */
  #mch input[type=text], #mch input[type=search], #mch input[type=email],
  #mch input[type=number], #mch textarea, #mch select{ font-size:16px; }
  /* los dos botones se suben con la mesa de trabajo (colocarEmpezar) */
  #mch .zona > .empezar{ margin-top:20px; }
}

/* ---------- repasar ---------- */
#mch .cab2{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
#mch .titulo{ margin:6px 0 0; font-size:1.7rem; color:var(--tit); line-height:1.15; }
#mch .entradilla{ margin:5px 0 0; color:var(--txt2); font-size:.92rem; max-width:70ch; }
#mch .volver{
  display:inline-flex; align-items:center; gap:7px; background:none; border:0; padding:0;
  color:var(--brand); font-size:.85rem; font-weight:700; cursor:pointer; text-decoration:none;
}
#mch a.volver:hover{ color:var(--brand-dark); text-decoration:underline; }
#mch .bloque{ background:var(--sup); border:1px solid var(--bord); border-radius:14px; box-shadow:var(--shadow); padding:20px; }
#mch .bloque > h3{ margin:0 0 12px; font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--txt2); font-weight:800; }
#mch .ped{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
#mch .ped .qui{ flex:1; min-width:240px; display:grid; gap:7px; }
#mch .ped .ref{ margin:0; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
#mch .ped .ref b{ color:var(--tit); font-size:1.05rem; }
#mch .ped .ref .fec{ color:var(--txt2); font-size:.83rem; }
#mch .ped .rot{ margin:0; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--txt2); font-weight:800; }
#mch .chips{ display:flex; gap:8px; flex-wrap:wrap; }
#mch .chip{
  display:inline-flex; align-items:baseline; gap:5px; font-size:.85rem; color:var(--txt);
  background:var(--sup3); border:1px solid var(--bord); border-radius:999px; padding:5px 12px;
}
#mch .chip b{ color:var(--tit); font-size:.95rem; font-variant-numeric:tabular-nums; }
#mch .rejilla{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; }
#mch .ficha{
  background:var(--sup); border:1px solid var(--bord); border-radius:14px; box-shadow:var(--shadow);
  padding:16px; display:grid; align-content:start; gap:9px; justify-items:center; text-align:center;
}
#mch .ficha img{ width:112px; height:112px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); }
#mch .ficha b{ color:var(--tit); font-size:.92rem; }
#mch .ficha ul{ margin:0; padding:0; list-style:none; font-size:.8rem; color:var(--txt2); display:grid; gap:2px; }
#mch .ficha .ojo{ font-size:.78rem; font-weight:700; color:var(--ambar); }
#mch .ficha .acc{ display:flex; gap:6px; margin-top:2px; }
#mch .tope{
  margin:0; font-size:.84rem; color:var(--rojo); background:#fbeae5; border:1px solid #f0c9bd;
  border-radius:9px; padding:10px 12px;
}
#mch textarea{
  width:100%; font:inherit; font-size:.88rem; color:var(--txt); background:var(--sup);
  border:1px solid var(--bord2); border-radius:10px; padding:11px 12px; resize:vertical; min-height:86px;
}
#mch .acepto{ display:flex; gap:11px; align-items:flex-start; cursor:pointer; font-size:.86rem; line-height:1.45; margin:0; font-weight:400; }
#mch .acepto input{ width:19px; height:19px; flex:none; margin-top:2px; accent-color:var(--brand); cursor:pointer; }
#mch .cierre{
  display:grid; grid-template-columns:minmax(0,1fr) clamp(320px,30%,420px);
  gap:clamp(18px,2.2vw,30px); margin-top:20px; align-items:stretch;
}
#mch .cierre > .bloque{ display:flex; flex-direction:column; }
#mch .cierre > .bloque textarea{ flex:1; }
#mch .confirmar{ display:grid; gap:14px; align-content:start; }
#mch .cuenta{ display:flex; justify-content:space-between; font-size:.98rem; font-weight:800; color:var(--tit); }
@media (max-width:991px){ #mch .cierre{ grid-template-columns:1fr; } }

/* ---------- enviado ---------- */
/* el mismo degradado del hero de la portada (custom.css:1750). Va en horizontal
   a propósito: cualquier franja suya es idéntica, así que encaja con la cabecera. */
#mch .escena{
  background:linear-gradient(90deg, #00365a 0%, #0068ae 62%, #1c86cc 100%);
  border-radius:18px; padding:44px 32px; display:grid; justify-items:center; gap:26px; text-align:center;
}
#mch .escena .exito{
  width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.42); color:#fff;
}
#mch .escena h1{ margin:0; font-size:2rem; color:#fff; line-height:1.15; }
#mch .escena p{ margin:0; color:#cfe6f8; font-size:.98rem; }
#mch .chapas{ display:flex; flex-wrap:wrap; gap:26px 24px; justify-content:center; }
#mch .chapa{ width:110px; text-align:center; }
/* solo sombra: el aro blanco se descartó porque podía leerse como parte del diseño */
#mch .chapa img{
  width:110px; height:110px; border-radius:50%; background:#fff; display:block;
  box-shadow:0 14px 28px rgba(0,18,36,.62), 0 4px 10px rgba(0,18,36,.48), inset 0 0 0 1px rgba(0,0,0,.14);
}
#mch .chapa span{ display:block; margin-top:11px; font-size:.8rem; font-weight:700; color:#fff; }
#mch .bajo{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin-top:18px; }
#mch .pasos{ margin:0; padding:0; list-style:none; display:grid; gap:14px; }
#mch .pasos li{ display:flex; gap:12px; align-items:flex-start; font-size:.89rem; color:var(--txt2); }
#mch .pasos .num{
  width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--sup3); border:1px solid var(--bord); color:var(--tit); font-size:.78rem; font-weight:800;
}
#mch .pasos b{ color:var(--tit); display:block; }
#mch .correo{
  display:flex; align-items:center; gap:11px; font-size:.87rem;
  background:var(--verde-fondo); border:1px solid var(--verde-borde); color:var(--verde-txt);
  border-radius:11px; padding:12px 14px;
}
#mch .porsi{ margin:0; font-size:.87rem; color:var(--txt2); }
#mch .porsi b{ color:var(--tit); }
#mch .botonera{ display:flex; gap:10px; flex-wrap:wrap; }

/* La ventana de cantidades es una pieza compartida con «Mis diseños» y viene
   con colores claros fijos. Dentro del editor cuelga de #mch, así que aquí se
   la viste de oscuro cuando toca. */
#mch[data-tema="oscuro"] .mch-ventana{ background:var(--sup); color:var(--txt); }
#mch[data-tema="oscuro"] .mch-vcab,
#mch[data-tema="oscuro"] .mch-vpie{ border-color:var(--bord); }
#mch[data-tema="oscuro"] .mch-vcab h2,
#mch[data-tema="oscuro"] .mch-st,
#mch[data-tema="oscuro"] .mch-sn{ color:var(--tit); }
#mch[data-tema="oscuro"] .mch-step{ background:var(--sup3); border-color:var(--bord); }
#mch[data-tema="oscuro"] .mch-step[data-cero="no"]{ background:#22303c; border-color:var(--bord2); }
#mch[data-tema="oscuro"] .mch-sbtn{ background:var(--sup); border-color:var(--bord2); color:var(--tit); }
#mch[data-tema="oscuro"] .mch-vsecundario{ background:var(--sup); border-color:var(--bord2); color:var(--tit); }

/* La salida de la pantalla de enviado: al final de todo y a la derecha. */
#mch .salida{ display:flex; justify-content:flex-end; margin-top:18px; }

/* «Guardar en mis diseños»: la otra salida del editor, para quien todavía no
   sabe cuántas quiere ni de qué formato.
   Mismo alto y misma separación que «Subir imagen»: son botones de ancho
   completo y tienen que leerse como una familia. */
#mch .secundario.ancho{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; margin-top:-8px;   /* el panel ya separa 16 px; con esto quedan 8 */
  padding:13px 20px; font-size:.94rem; font-weight:700; border-radius:10px; text-align:center;
}
#mch .secundario[disabled]{
  opacity:.55; cursor:not-allowed; background:var(--sup3); color:var(--txt2);
}
#mch .secundario[disabled]:hover{ filter:none; color:var(--txt2); }

/* La salida a la manera de siempre, debajo del editor.
   Va discreta a propósito: es la alternativa, no la oferta. Y en gris apagado
   sobre cualquiera de los dos temas, porque vive FUERA de #mch (está en la
   plantilla, no la pinta el JavaScript) y no hereda sus variables. */
#mch-salida{
  max-width:1180px;
  margin:16px auto 0;
  padding:0 16px;
  font-size:.85rem;
  line-height:1.5;
  color:#7a8794;
  text-align:center;
}
#mch-salida a{ color:#0068ae; font-weight:700; }
/* En repasar y en enviado ya no viene a cuento: ahí el cliente YA ha diseñado. */
#mch-salida[hidden]{ display:none; }

/* ---------- diseños ya mandados, dentro de la misma lista ----------
   Van apagados y sin botones: un envío enviado no se toca, y si el cliente se
   equivocó se hace otro que lo sustituye. La diferencia tiene que verse de un
   vistazo, pero sin que parezcan un error: están bien, están hechos. */
#mch .env-item.env-cerrado{ background:var(--sup2); border-style:dashed; }
#mch .env-item.env-cerrado .env-mini{ opacity:.75; }
#mch .env-txt .hecho{ color:var(--verde); font-weight:700; }
#mch .env-candado{
  display:inline-flex; align-items:center; padding:5px 10px; border-radius:6px;
  background:var(--sup3); color:var(--txt2);
  font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}

/* ============================================================================
   LAS PIEZAS DEL DISEÑO Y EL EDITOR DE TEXTOS

   El panel de la chapa no enseña todos los mandos a la vez: arriba están las
   piezas (la imagen y cada texto) y debajo solo los mandos de la que se esté
   tocando. Con los nueve mandos del texto sumados a los del encuadre, todo
   junto parecía una cabina de avión.
   ============================================================================ */
/* minmax(0,1fr) y no el 1fr de serie: con un nombre largo («MARÍA DEL CARMEN
   RODRÍGUEZ») la columna crecía hasta pasarse del ancho del móvil y la página
   se podía arrastrar de lado. El renglón ya recorta el nombre con puntos. */
#mch .piezas{ display:grid; grid-template-columns:minmax(0,1fr); gap:7px; margin-bottom:14px; }
#mch .pieza{
  display:flex; align-items:center; gap:10px; width:100%;
  background:var(--sup); border:1px solid var(--bord); border-radius:11px;
  padding:8px 11px; cursor:pointer; text-align:left; color:var(--txt);
}
#mch .pieza[aria-current="true"]{ border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); }
#mch .pieza .mini{
  width:30px; height:30px; border-radius:8px; background:var(--sup2); color:var(--txt2);
  display:grid; place-items:center; flex:0 0 auto;
}
#mch .pieza .mini svg{ width:17px; height:17px; }
#mch .pieza .mini.letra{ font-size:.95rem; color:var(--tit); }
#mch .pieza .nom{ flex:1; min-width:0; font-size:.86rem; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#mch .pieza .det{ font-size:.74rem; color:var(--txt2); flex:0 0 auto; }
#mch .pieza .tinta{ width:14px; height:14px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 0 1px var(--bord2); }
#mch .masTexto{
  display:flex; align-items:center; justify-content:center; width:100%;
  background:var(--sup); color:var(--tit); border:1px dashed var(--bord2); border-radius:11px;
  padding:10px; font-weight:700; font-size:.84rem; cursor:pointer;
}
#mch .masTexto:hover{ border-color:var(--brand); }
#mch .masTexto[disabled]{ opacity:.55; cursor:not-allowed; color:var(--txt2); }

/* dentro del panel, los botones de ancho completo no llevan el -8px de arriba */
#mch .ctrl .secundario.ancho{ margin-top:0; }

/* El icono del botón de la IA viene de la fuente Material Icons, que el tema
   deja a 24 px: aquí el texto va a 0.94rem y hay que bajarlo. El hueco con el
   texto lo pone el gap del propio botón, que es un flex. */
#mch .secundario.ancho .ia-ico{ font-size:19px; line-height:1; margin-right:8px; }

/* La pastilla «Nuevo», la misma que lleva el diseñador en la portada
   (.mp-nuevo en custom.css): naranja de la casa, esquinas de 4 px y versalitas.
   Aquí se copia en vez de reutilizarla porque el editor tiene su propia hoja y
   sus propias variables. */
#mch .mch-nuevo{
  display:inline-block; margin-left:9px;
  font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  line-height:1; padding:4px 7px; border-radius:4px;
  background:var(--accent); color:#fff;
}
#mch .ctrl .secundario.peligro{ color:var(--rojo); border-color:#e8c4bb; }

#mch .etiq{ font-size:.82rem; font-weight:700; color:var(--tit); margin:0; }
#mch .cajatexto{
  width:100%; padding:10px 12px; border:1px solid var(--bord2); border-radius:10px;
  background:var(--sup); color:var(--txt); font-size:.95rem; font-family:inherit;
}
#mch .cajatexto:focus{ outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand); }

/* el botón que abre las letras y la lista que despliega */
#mch .elegirletra{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  background:var(--sup); border:1px solid var(--bord2); border-radius:10px;
  padding:10px 12px; cursor:pointer; color:var(--txt); font-size:1rem;
}
#mch .elegirletra[aria-expanded="true"]{ border-color:var(--brand); }
#mch .letras[hidden]{ display:none; }
#mch .letras{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:6px;
  max-height:270px; overflow:auto; padding:8px; margin-top:-6px;
  background:var(--sup3); border:1px solid var(--bord); border-radius:11px;
}
#mch .letra-op{
  display:flex; align-items:center; gap:9px; padding:7px 9px; cursor:pointer;
  background:var(--sup); border:1px solid var(--bord); border-radius:9px; color:var(--txt); text-align:left;
}
#mch .letra-op[aria-pressed="true"]{ border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); }
#mch .letra-op .ejemplo{ font-size:20px; line-height:1; flex:0 0 auto; min-width:26px; text-align:center; }
#mch .letra-op .comoes{ min-width:0; display:flex; flex-direction:column; }
#mch .letra-op .comoes b{ font-size:.74rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#mch .letra-op .comoes small{ font-size:.66rem; color:var(--txt2); }

/* recto o curvado, y dónde va el curvado */
#mch .modo{ display:flex; gap:6px; }
#mch .modo button{
  flex:1; padding:9px 6px; border:1px solid var(--bord2); background:var(--sup);
  border-radius:9px; cursor:pointer; font-size:.82rem; font-weight:700; color:var(--txt);
}
#mch .modo button[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:#fff; }
#mch .curvo{ display:grid; gap:11px; padding:11px; background:var(--sup3);
  border:1px solid var(--bord); border-radius:11px; }

/* cuatro botones no caben en una fila del panel: van de dos en dos */
#mch .modo.cuatro{ flex-wrap:wrap; }
#mch .modo.cuatro button{ flex:1 1 calc(50% - 3px); }

/* ============================================================================
   LOS STICKERS
   La rejilla sigue el patrón de la lista de letras (.letras): se despliega en
   el panel, pegada al botón que la abre, sobre el gris claro.
   ============================================================================ */
#mch .masTexto + .masTexto{ margin-top:7px; }
#mch .masTexto[aria-expanded="true"]{ border-style:solid; border-color:var(--brand); }
#mch .stickers{
  display:grid; gap:10px; margin:-6px 0 14px; padding:10px;
  background:var(--sup3); border:1px solid var(--bord); border-radius:11px;
}
#mch .stickers[hidden]{ display:none; }
#mch .st-cab{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
#mch .st-cab b{ font-size:.8rem; color:var(--tit); }
#mch .st-cab button{ background:none; border:0; color:var(--txt2); font-size:1.2rem; line-height:1; cursor:pointer; padding:2px 6px; }
#mch .st-pills{ display:flex; gap:5px; overflow-x:auto; padding-bottom:3px; scrollbar-width:thin; }
#mch .st-pill{
  white-space:nowrap; background:var(--sup); border:1px solid var(--bord2); border-radius:999px;
  padding:4px 11px; font-size:.75rem; font-weight:700; color:var(--tit); cursor:pointer;
}
#mch .st-pill[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:#fff; }
#mch .st-rej{ display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:6px; max-height:230px; overflow:auto; }
#mch .st{
  display:grid; justify-items:center; gap:2px; background:var(--sup); border:1px solid var(--bord);
  border-radius:10px; padding:6px 2px 4px; cursor:pointer; color:var(--txt2); font-size:.64rem; font-weight:700;
}
#mch .st:hover{ border-color:var(--brand); color:var(--tit); }
#mch .st .dib{ width:44px; height:44px; border-radius:8px; display:block; }
#mch .st .dib svg{ width:100%; height:100%; display:block; }
/* Las piezas de ilustración van como <img> y no llenan su caja como el
   SVG: contain para que se vean enteras y sin deformar. */
#mch .st .dib img{ width:100%; height:100%; display:block; object-fit:contain; }
/* los dibujos claros (fantasma, copo, bocadillo blanco) no se ven sobre blanco */
#mch .st .dib.oscuro, #mch .pieza .mini.dibujo.oscuro{ background:#2b3946; }
#mch .pieza .mini.dibujo svg{ width:100%; height:100%; }
#mch .pieza .mini.dibujo img{ width:100%; height:100%; object-fit:contain; display:block; }

/* LA CAPA DE LOS TIRADORES
   Cubre la mesa entera y no solo el círculo: las esquinas de una foto a tamaño
   normal caen justo fuera de la chapa. No recoge clics; los tiradores se
   detectan desde la mesa (editor.js, enlazarTiradores). */
/* user-select: arrastrar por la mesa no tiene que seleccionar nada */
#mch .mesa{ position:relative; overflow:hidden; -webkit-user-select:none; user-select:none; }
#mch .capa-tiradores{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }

/* ============================================================================
   IDEAS POR TEMÁTICA
   El botón es de la familia de «Guardar en mis diseños» (contorno, ancho
   completo). La ventana cuelga de #mch para heredar sus colores: temáticas a
   la izquierda y plantillas a la derecha; en móvil sube desde abajo con las
   temáticas en fila.
   ============================================================================ */
#mch .secundario.ideas{ gap:9px; }
/* La varita es un dibujo con aire alrededor y pegada al texto se lee como un
   borrón, así que va más suelta que el icono de las temáticas. */
#mch .secundario.ia{ gap:12px; }
/* por encima de todo, también de la barra de las cookies, que tapaba el botón */
#mch .mch-velo[data-ed="ideasVelo"]{ z-index:100000; }
#mch .mch-ideas{
  background:var(--sup); color:var(--txt); border-radius:16px;
  /* ancho en px y no en %: el velo es una rejilla y ahí un porcentaje se
     resolvía contra el propio contenido y la ventana salía estrecha.
     El alto también fijo, para que no cambie de tamaño al pasar de temática. */
  width:880px; max-width:100%; height:min(620px,92vh);
  display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.35);
}
#mch .ideas-cab{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--bord); }
#mch .ideas-cab h2{ margin:0; font-size:1.05rem; color:var(--tit); }
#mch .ideas-cerrar{
  width:34px; height:34px; border-radius:9px; border:1px solid var(--bord2); background:var(--sup);
  color:var(--tit); font-size:1.3rem; line-height:1; cursor:pointer;
}
#mch .ideas-cuerpo{ display:grid; grid-template-columns:210px minmax(0,1fr); min-height:0; }
#mch .ideas-temas{
  display:grid; align-content:start; gap:3px; padding:10px; overflow:auto;
  background:var(--sup3); border-right:1px solid var(--bord);
}
#mch .ideas-tema{
  display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:10px; cursor:pointer;
  background:none; border:1px solid transparent; color:var(--tit); font-size:.86rem; font-weight:700; text-align:left;
}
#mch .ideas-tema:hover{ background:var(--sup); }
#mch .ideas-tema[aria-pressed="true"]{ background:var(--sup); border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); }
#mch .ideas-mini{ width:30px; height:30px; border-radius:50%; display:block; flex:none; box-shadow:0 1px 4px rgba(15,45,75,.25); }
#mch .ideas-rej{
  padding:18px; overflow:auto; display:grid; gap:18px 10px; align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
}
#mch .ideas-tpl{
  display:grid; justify-items:center; gap:7px; background:none; border:0; padding:4px; cursor:pointer;
  color:var(--tit); font-size:.82rem; font-weight:700;
}
#mch .ideas-mini.grande{ width:112px; height:112px; box-shadow:0 4px 12px rgba(15,45,75,.22); transition:transform .12s; }
#mch .ideas-tpl:hover .ideas-mini.grande{ transform:translateY(-2px); }
#mch .ideas-tpl[aria-pressed="true"] .ideas-mini.grande{ box-shadow:0 0 0 3px var(--sup), 0 0 0 5px var(--brand); }
/* la línea de «más plantillas» ocupa toda la fila de la rejilla */
#mch .ideas-mas{
  grid-column:1/-1; margin:2px 0 0; text-align:center; font-size:.82rem; color:var(--txt2);
}
#mch .ideas-pie{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 18px; border-top:1px solid var(--bord); font-size:.82rem; color:var(--txt2);
}
#mch .ideas-pie .principal{ width:auto; padding:10px 18px; }
@media (max-width:640px){
  #mch .mch-velo[data-ed="ideasVelo"]{ padding:0; align-items:flex-end; }
  #mch .mch-ideas{ border-radius:16px 16px 0 0; height:auto; max-height:88vh; width:100%; }
  #mch .ideas-cuerpo{ grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }
  #mch .ideas-temas{ display:flex; overflow-x:auto; border-right:0; border-bottom:1px solid var(--bord); padding:8px 10px; }
  /* flex:0 0 auto, o en Safari los botones se encogen por debajo de su texto y,
     como no parte, el nombre se sale y se monta sobre la chapita del siguiente
     (visto en un iPhone el 17 sept 2026; en Chrome no pasa porque respeta el
     ancho mínimo del contenido). La tira se desplaza a lo ancho, que es lo que
     se quiere: caben ocho temáticas y en un móvil se ven tres. */
  #mch .ideas-tema{ white-space:nowrap; flex:0 0 auto; }
  #mch .ideas-rej{ grid-template-columns:repeat(2,1fr); padding:14px 10px; }
  #mch .ideas-pie .principal{ width:100%; }
}

/* EL ORDEN DE LAS CAPAS
   Cada texto y sticker lleva un asa a la derecha para arrastrarlo arriba
   (encima) o abajo (debajo). touch-action:none en el asa y solo en el asa: en
   el resto del renglón el dedo tiene que seguir desplazando la página. */
#mch .pieza .asa{
  display:grid; place-items:center; width:26px; height:30px; margin:-4px -6px -4px 2px; flex:0 0 auto;
  color:var(--txt2); cursor:grab; touch-action:none; border-radius:7px;
}
#mch .pieza .asa:hover{ background:var(--sup2); color:var(--tit); }
#mch .pieza.moviendo{
  position:relative; z-index:3; cursor:grabbing; background:var(--sup);
  box-shadow:var(--shadow-alto), inset 0 0 0 1px var(--brand); border-color:var(--brand);
}
#mch .pieza.moviendo .asa{ cursor:grabbing; }

/* EL TEXTO PARA PERSONALIZAR
   Las plantillas marcan un texto (el nombre, la clase, el año) como el que el
   cliente tiene que cambiar: sale elegido al cargar y con esta pista encima. */
#mch .pistapersonal{
  display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; margin:0;
  font-size:.84rem; font-weight:700; color:#8a4a00;
  background:#fff4e0; border:1px solid #f5d29a; border-radius:10px; padding:9px 12px;
}
#mch .pieza .tuyo{
  flex:0 0 auto; font-size:.66rem; font-weight:800; color:#8a4a00;
  background:#fff4e0; border:1px solid #f5d29a; border-radius:999px; padding:1px 7px;
}

#mch .pistapersonal small{ flex-basis:100%; padding-left:23px; font-weight:400; font-size:.76rem; color:#8a5a20; }

/* Los ajustes de la pieza elegida, justo debajo de su renglón y sin marco:
   con borde parecían una caja dentro de otra. */
#mch .piezas > .ctrl{ margin:4px 0 10px; padding:0 2px; }
#mch .piezas > .ctrl[hidden]{ display:none; }

/* La papelera de cada texto y sticker */
#mch .pieza .papelera{
  display:grid; place-items:center; width:26px; height:28px; margin:-4px -2px; flex:0 0 auto;
  color:var(--txt2); border-radius:7px; cursor:pointer;
}
#mch .pieza .papelera:hover, #mch .pieza .papelera:focus-visible{ background:#fbeae5; color:var(--rojo); outline:none; }

/* ============================================================================
   LA VENTANA DEL FILTRO DE IA
   Misma casa que «Ideas por temática», con otra distribución: los estilos en
   rejilla a la izquierda y la muestra grande a la derecha, en redondo, porque
   lo que el cliente compara es cómo le queda la chapa.
   ============================================================================ */
#mch .mch-velo[data-ed="iaVelo"]{ z-index:100000; }
#mch .mch-ia{
  background:var(--sup); color:var(--txt); border-radius:16px;
  width:min(1120px, calc(100vw - 32px)); max-height:min(92vh, 860px);
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
#mch .ia-cab{ display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:14px 18px; border-bottom:1px solid var(--bord); }
#mch .ia-cab h2{ margin:0; font-size:1.05rem; color:var(--tit); }

#mch .ia-cuerpo{ display:grid; grid-template-columns:minmax(0,1fr) 320px; min-height:0; }

/* Cuatro por fila y no «las que quepan»: con la muestra grande al lado, cuatro
   es lo que deja la miniatura a un tamaño en el que se distingue un estilo de
   otro, que es para lo que está. */
#mch .ia-rej{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px; padding:18px; overflow:auto; align-content:start;
}
#mch .ia-est{
  display:grid; gap:6px; justify-items:center; text-align:center; cursor:pointer;
  background:var(--sup); border:1px solid var(--bord2); border-radius:12px; padding:7px;
  color:var(--txt); font:inherit;
}
#mch .ia-est:hover{ border-color:var(--brand); }
#mch .ia-est[aria-pressed="true"]{ border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); background:var(--sup3); }
#mch .ia-mini{ width:100%; aspect-ratio:1/1; border-radius:50%; object-fit:cover; display:block;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); background:var(--sup2); }
#mch .ia-est span{ font-size:.82rem; font-weight:700; color:var(--tit); line-height:1.25; }
/* El precio, debajo del nombre y en letra fina: tiene que estar, pero no
   competir con el nombre ni con la muestra, que es lo que se mira. El hueco lo
   quita el margen negativo, porque la tarjeta separa sus tres partes por igual. */
#mch .ia-est .ia-coste{ font-size:.72rem; font-weight:400; color:var(--txt2);
  line-height:1.2; margin-top:-3px; }

#mch .ia-previa{
  border-left:1px solid var(--bord); padding:18px; display:grid; gap:10px;
  align-content:start; justify-items:center; text-align:center; background:var(--sup3);
}
#mch .ia-disco{ width:100%; max-width:250px; aspect-ratio:1/1; border-radius:50%; overflow:hidden;
  box-shadow:var(--shadow-alto); background:var(--sup2); }
/* Sin zoom: la muestra grande tiene que enseñar exactamente lo mismo que la
   miniatura de la rejilla, o al elegir un estilo parece que cambia la imagen.
   Se pierde la simulación del canto de la chapa; si algún día se quiere, hay
   que aplicarla a las dos, no solo aquí. */
#mch .ia-disco img{ width:100%; height:100%; object-fit:cover; display:block; }
#mch .ia-previa b{ font-size:1rem; color:var(--tit); }
#mch .ia-previa p{ margin:0; font-size:.84rem; color:var(--txt2); }
#mch .ia-hueco{ color:var(--txt2); font-size:.86rem; padding:40px 10px; line-height:1.5; }

/* Solo el botón, pegado a la derecha y del ancho de su texto: antes compartía
   el pie con un «Estilo elegido: X» y el botón se estiraba de punta a punta. */
#mch .ia-pie{ display:flex; align-items:center; justify-content:flex-end;
  padding:14px 18px; border-top:1px solid var(--bord); background:var(--sup); }
#mch .ia-pie .principal{ width:auto; }

/* Sin créditos, el botón del pie deja de ser «Aplicar» y pasa a ser la compra.
   En naranja y no en azul: no es la acción de siempre, y así no se pulsa
   creyendo que va a generar. */
#mch .ia-pie .ia-comprar,
#mch .ia-pie .ia-comprar:hover,
#mch .ia-pie .ia-comprar:focus{
  background:var(--accent); box-shadow:0 2px 8px rgba(242,112,27,.30);
}

@media (max-width:760px){
  /* En móvil la muestra grande va arriba, que es lo que se mira, y la rejilla
     debajo con su propio desplazamiento. */
  #mch .ia-cuerpo{ grid-template-columns:1fr; }
  #mch .ia-previa{ border-left:0; border-bottom:1px solid var(--bord); order:-1; padding:14px; }
  #mch .ia-disco{ max-width:150px; }
  #mch .ia-hueco{ padding:14px 10px; }
  #mch .ia-rej{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; padding:12px; }
}