/* ── MI MUEBLE — la página del cliente final (fase A, 2026-10-12) ──────
   Pública y sin cuenta (SELLO-UI §1, como el enlace 3D del cliente):
   foundation → components → publico → esto. Sin data-zona: lienzo claro.
   Todo lo que pinta sobre papel usa --belk-paper-*. Solo layout y tamaño:
   los colores son los tokens con su respaldo exacto.
   Teléfono primero: el 3D arriba y la pregunta abajo. ── */
/* ── La paleta del CLIENTE (28-oct, dueño: «aprobado, con el piso de madera») ──
   Mi mueble deja el azul marino de los talleres y se viste como una sala de casa, al estilo
   del planificador de IKEA (no los colores de su logo): blanco, gris claro y negro carbón, con
   un toque madera. Es la DEFINICIÓN de los tokens en este ámbito (por eso aquí sí hay hex):
   solo bajo body.mm; Diseño 3D y las demás páginas siguen con foundation.css. Botón principal
   negro con texto blanco (18,9), secundario gris con tinta negra (17,4), tarjeta elegida con
   borde negro, aviso «Deshacer» negro con el enlace en madera (5,6). Contraste AA. */
body.mm{
  --belk-paper:#FFFFFF; --belk-paper-text:#111111; --belk-paper-muted:#484848;
  --belk-paper-border:#DFDFDF; --belk-paper-alt:#F5F5F5; --belk-paper-sunken:#EDEDED;
  --belk-paper-hint:#767676; --belk-paper-brand:#111111; --belk-paper-ok:#2F6B3F;
  --belk-paper-warn:#9A5418; --belk-border-strong:rgba(0,0,0,.20);
  --belk-shadow-1:0 2px 8px rgba(0,0,0,.06); --belk-shadow-2:0 8px 24px rgba(0,0,0,.10);
  --belk-accent:#C27C3E; --belk-on-accent:#111111; --belk-accent-hover:#D08F55;
  --belk-brand:#111111; --belk-brand-hover:#333333; --belk-on-brand:#FFFFFF;
  --belk-brand-soft:#F5F5F5; --belk-level-2:#F5F5F5; --belk-level-2-hi:#EBEBEB; --belk-text:#111111;
  --belk-link:#111111;
}
/* Con esta paleta el borde «al pasar el ratón» (juego.css: --belk-paper-brand) era el MISMO negro
   de la tarjeta elegida: la tarjeta bajo el puntero se leía como marcada sin que nadie la eligiera
   (28-oct, «Cocina · A gas» en los electrodomésticos). Aquí el paso del ratón es un gris medio;
   el negro queda solo para lo elegido (y el anillo de foco del teclado, que no cambia). */
@media (hover:hover){
  body.mm .mmj-tarjeta:not([aria-pressed="true"]):not(:disabled):hover{
    border-color:color-mix(in srgb, var(--belk-paper-text,#111111) 40%, var(--belk-paper,#FFFFFF));
  }
}
.mm main.mm-main{max-width:1280px; margin:12px auto; padding:0 16px 32px}
/* El encabezado y el pie no flotan aquí: lo que se pega arriba en el teléfono es el 3D. */
.mm .phdr{gap:12px; padding:10px 16px; position:static}
.mm-para{
  flex:1; text-align:right; font-weight:700; font-size:.95rem;
  color:var(--belk-paper-text,#0D2350); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mm-para[hidden], .mm-ayuda[hidden], .mm-final[hidden], .mm-mensaje[hidden]{display:none}

/* Botones: el mismo componente, más grande (la persona usa el teléfono a un brazo). */
.mm .belk-btn{font-size:15px; padding:12px 16px; min-height:48px; white-space:normal; line-height:1.25}
.mm .belk-btn svg{width:22px; height:22px; flex-shrink:0}

/* ── Progreso «1 de 5» ── */
.mm-progreso{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.mm-barra{
  flex:1; height:8px; border-radius:8px; overflow:hidden;
  background:var(--belk-paper,#FFFFFF); border:1px solid var(--belk-paper-border,rgba(13,35,80,.10));
}
.mm-barra-relleno{display:block; height:100%; width:0; background:var(--belk-paper-brand,#143A7D); transition:width var(--belk-transition,.18s ease)}
.mm-progreso-txt{font-weight:700; font-size:15px; color:var(--belk-paper-text,#0D2350); white-space:nowrap}

/* ── Cuerpo: 3D + pregunta ── */
.mm-cuerpo{display:grid; grid-template-columns:1fr; gap:12px}
.mm-visor, .mm-panel{
  background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D2350);
  border:1px solid var(--belk-paper-border,rgba(13,35,80,.10)); border-radius:var(--belk-radius-sm,8px);
  padding:12px; min-width:0;
}
.mm-visor{display:flex; flex-direction:column; gap:8px}
.mm-lienzo{
  position:relative; height:42vh; min-height:260px;
  border:1px solid var(--belk-paper-border,rgba(13,35,80,.10)); border-radius:var(--belk-radius-sm,8px);
  background:var(--belk-paper-alt,#F5F8FC); overflow:hidden;
}
.mm-lienzo canvas{display:block; width:100%; height:100%; touch-action:none}
/* Sin mueble todavía: el mismo lienzo con su texto encima (un formato, SELLO §1). */
.mm-vacio{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:24px; font-size:15px; color:var(--belk-paper-muted,#414B5C); pointer-events:none;
}
.mm[data-estado="con-mueble"] .mm-vacio{display:none}
.mm-herr{display:flex; flex-wrap:wrap; gap:8px}
.mm-herr .belk-btn{flex:1}
.mm-pista{font-size:13px; color:var(--belk-paper-muted,#414B5C)}

/* ── La pregunta ── */
.mm-panel{display:flex; flex-direction:column; gap:12px}
.mm-pregunta{font-size:1.35rem; line-height:1.25; font-weight:800; color:var(--belk-paper-text,#0D2350)}
.mm-ayuda{font-size:15px; color:var(--belk-paper-muted,#414B5C)}
.mm-opciones{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.mm-opciones .belk-btn{width:100%; justify-content:flex-start; text-align:left}
.mm-opciones .mm-op-tipo{flex-direction:column; justify-content:center; text-align:center; min-height:96px}
.mm-opciones .mm-op-tipo svg{width:36px; height:36px}
.mm-opciones .mm-ancho{grid-column:1 / -1}

/* Medidas */
.mm-campo{display:flex; flex-direction:column; gap:4px; font-size:15px; font-weight:600; color:var(--belk-paper-text,#0D2350)}
.mm-campo small{font-weight:400; font-size:13px; color:var(--belk-paper-muted,#414B5C)}
.mm-campo input{
  font:inherit; font-size:18px; font-weight:600; padding:10px 12px; min-height:48px; width:100%;
  background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D2350);
  border:1px solid var(--belk-border-strong,rgba(13,35,80,.18)); border-radius:var(--belk-radius-sm,8px);
}
.mm-campo input:focus-visible{outline:2px solid var(--belk-paper-brand,#143A7D); outline-offset:1px}
.mm-unidad{display:flex; align-items:center; gap:8px}
.mm-unidad span{font-weight:600; color:var(--belk-paper-muted,#414B5C)}
.mm-aviso{font-size:14px; font-weight:400; color:var(--belk-paper-warn,#9C4A12); min-height:0}
.mm-aviso:empty{display:none}

/* Colores: muestras con FOTO (MelaminaSwatch) */
.mm-cats, .mm-pintar{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px}
.mm-cats .belk-btn, .mm-pintar .belk-btn{width:auto; flex:1 1 auto; justify-content:center; min-height:40px; padding:8px 12px; font-size:14px}
.mm-muestras{grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:8px}
.mm-muestras .belk-btn{flex-direction:column; align-items:stretch; padding:6px; gap:6px; font-size:13px; text-align:center}
.mm-muestras .mlam-chip{display:block; width:100%; height:56px; object-fit:cover; border-radius:4px;
  border:1px solid var(--belk-paper-border,rgba(13,35,80,.10))}
.mm-otro{grid-column:1 / -1; padding:4px 0}
.mm-otro .lb{font-size:15px; font-weight:600; color:var(--belk-paper-text,#0D2350); cursor:pointer}
.mm-elegido{grid-column:1 / -1; font-size:14px; color:var(--belk-paper-muted,#414B5C)}

/* ── Navegación: siempre a mano, pegada abajo del panel ── */
.mm-nav{
  position:sticky; bottom:0; display:flex; gap:8px; padding-top:8px; margin-top:auto;
  background:var(--belk-paper,#FFFFFF); border-top:1px solid var(--belk-paper-border,rgba(13,35,80,.10));
}
.mm-nav .belk-btn{flex:1}
.mm-nav .belk-btn[hidden]{display:none}

/* ── ¡Listo! ── */
.mm-final{display:flex; flex-direction:column; gap:12px}
.mm-nombre{font-size:1.15rem; font-weight:700; color:var(--belk-paper-text,#0D2350)}
.mm-form{display:flex; flex-direction:column; gap:10px}
.mm-mensaje{
  font-size:15px; padding:10px 12px; border-radius:var(--belk-radius-sm,8px);
  background:var(--belk-paper-alt,#F5F8FC); color:var(--belk-paper-text,#0D2350);
  border:1px solid var(--belk-paper-border,rgba(13,35,80,.10));
}
/* El error se marca con el BORDE, no repintando la caja (SELLO §6). */
.mm-mensaje.es-error{border-color:var(--belk-paper-err,#8E3B31); border-width:2px}
.mm-mensaje.es-ok{border-color:var(--belk-paper-ok,#2E6B4F); border-width:2px}
.mm-main > .mm-mensaje{margin-bottom:12px}
.mm-adam{padding-top:4px}

/* ── Adam: hasta 5 cambios (fase B) — una caja chica de papel dentro de «¡Listo!» ── */
.mm-adam--viva{
  display:flex; flex-direction:column; gap:8px; padding:12px;
  background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D2350);
  border:1px solid var(--belk-paper-border,rgba(13,35,80,.10)); border-radius:var(--belk-radius-sm,8px);
}
.mm-adam-cab{display:flex; align-items:center; gap:8px; font-size:15px; color:var(--belk-paper-text,#0D2350)}
.mm-adam-cab svg{width:22px; height:22px; flex-shrink:0}
.mm-adam-cab strong{flex:1; min-width:0}
.mm-adam-cupo{
  font-size:13px; font-weight:700; white-space:nowrap; padding:4px 8px; border-radius:999px;
  background:var(--belk-paper-alt,#F5F8FC); color:var(--belk-paper-text,#0D2350);
  border:1px solid var(--belk-paper-border,rgba(13,35,80,.10));
}
.mm-adam-msgs{
  display:flex; flex-direction:column; gap:6px; max-height:260px; overflow-y:auto; padding:2px;
  background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D2350);
}
.mm-adam-msg{
  max-width:88%; font-size:15px; line-height:1.4; padding:8px 12px; border-radius:12px;
  border:1px solid var(--belk-paper-border,rgba(13,35,80,.10)); overflow-wrap:anywhere;
}
.mm-adam-msg--adam{align-self:flex-start; background:var(--belk-paper-alt,#F5F8FC); color:var(--belk-paper-text,#0D2350)}
.mm-adam-msg--tu{align-self:flex-end; background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D2350); border-color:var(--belk-paper-brand,#143A7D)}
.mm-adam-msg--pensando{color:var(--belk-paper-muted,#414B5C); font-style:italic}
.mm-adam-msg small{display:block; margin-top:4px; font-size:13px; font-weight:700; color:var(--belk-paper-ok,#2E6B4F)}
.mm-adam-form{display:flex; gap:6px; align-items:stretch}
.mm-adam-form input{
  flex:1; min-width:0; font:inherit; font-size:16px; padding:10px 12px; min-height:48px;
  background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D2350);
  border:1px solid var(--belk-border-strong,rgba(13,35,80,.18)); border-radius:var(--belk-radius-sm,8px);
}
.mm-adam-form input:focus-visible{outline:2px solid var(--belk-paper-brand,#143A7D); outline-offset:1px}
.mm-adam-form .belk-btn{flex:none}
.mm-adam-form .belk-btn[hidden]{display:none}
.mm-adam-pie{display:flex; flex-direction:column; gap:6px}
.mm-adam-pie .belk-btn{align-self:flex-start; min-height:40px; padding:8px 12px; font-size:14px}
.mm-adam-fin{
  font-size:15px; font-weight:600; padding:10px 12px; border-radius:var(--belk-radius-sm,8px);
  background:var(--belk-paper-alt,#F5F8FC); color:var(--belk-paper-text,#0D2350);
  border:1px solid var(--belk-paper-border,rgba(13,35,80,.10));
}
.mm-adam-fin[hidden]{display:none}
/* Sin cambios: la caja queda en su sitio, apagada (SELLO §1), con el aviso. */
.mm-adam--agotada .mm-adam-form{opacity:.55}
.mm[data-paso="listo"] .mm-pregunta{font-size:1.6rem}

.mm .pftr{position:static; justify-content:center; padding:16px; font-size:13px; color:var(--belk-paper-muted,#414B5C)}

/* ── El pedido al taller (conexión cliente ↔ taller, fase 1, 2026-10-26) ──
   Todo sobre papel: tinta --belk-paper-*. Controles del sello (belk-btn, .tgr) más grandes. */
.mm-form[hidden], .mm-confirma[hidden], .mm-vista[hidden], .mm-estado[hidden]{display:none}
.mm-zona{display:flex; flex-direction:column; gap:10px}
.mm-campo select{
  font:inherit; font-size:17px; font-weight:600; padding:10px 12px; min-height:48px; width:100%;
  background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D2350);
  border:1px solid var(--belk-border-strong,rgba(13,35,80,.18)); border-radius:var(--belk-radius-sm,8px);
}
.mm-campo select:disabled, .mm-campo input:disabled{opacity:.6}
.mm-campo select:focus-visible{outline:2px solid var(--belk-paper-brand,#143A7D); outline-offset:1px}
.mm-zona-lugar{font-size:14px; font-weight:600; color:var(--belk-paper-muted,#414B5C); min-height:1em}
.mm-zona-lugar:empty{display:none}
/* La comuna: un buscador con su lista (combobox) */
.mm-combo{position:relative}
.mm-combo-lista{
  list-style:none; margin:4px 0 0; padding:4px; max-height:260px; overflow-y:auto;
  background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D2350);
  border:1px solid var(--belk-border-strong,rgba(13,35,80,.18)); border-radius:var(--belk-radius-sm,8px);
  box-shadow:var(--belk-shadow-2,0 8px 24px rgba(13,35,80,.16));
}
.mm-combo-lista[hidden]{display:none}
.mm-combo-lista li{display:flex; justify-content:space-between; gap:8px; align-items:baseline; padding:10px 12px; min-height:44px;
  border-radius:6px; cursor:pointer; font-size:16px; font-weight:600; color:var(--belk-paper-text,#0D2350)}
.mm-combo-lista li small{font-size:13px; font-weight:400; color:var(--belk-paper-muted,#414B5C); text-align:right}
.mm-combo-lista li:hover, .mm-combo-lista li[aria-selected="true"]{background:var(--belk-paper-alt,#F5F8FC); outline:1px solid var(--belk-paper-border,rgba(13,35,80,.10))}
.mm-combo-lista .mm-combo-vacio{cursor:default; font-weight:400; color:var(--belk-paper-muted,#414B5C)}
.mm-grupo{border:0; margin:0; padding:0; min-width:0; display:flex; flex-direction:column; gap:6px}
.mm-grupo legend{padding:0; margin-bottom:6px; font-size:15px; font-weight:600; color:var(--belk-paper-text,#0D2350)}
.mm-fila{display:flex; flex-wrap:wrap; gap:8px}
.mm-fila .belk-btn{flex:1 1 auto}
.mm .mm-fila .belk-btn--sm{min-height:44px; font-size:14px; padding:8px 12px}
.mm-pista-campo{font-size:13px; color:var(--belk-paper-muted,#414B5C)}
.mm-acepto{display:flex; gap:10px; align-items:flex-start; font-size:15px; font-weight:600; line-height:1.35; color:var(--belk-paper-text,#0D2350); cursor:pointer}
.mm-acepto input{width:22px; height:22px; margin:0; flex:none; accent-color:var(--belk-paper-brand,#143A7D)}
.mm-cuidados{
  padding:10px 12px; font-size:14px; line-height:1.45; border-radius:var(--belk-radius-sm,8px);
  background:var(--belk-paper-alt,#F5F8FC); color:var(--belk-paper-text,#0D2350); border:1px solid var(--belk-paper-border,rgba(13,35,80,.10));
}
.mm-cuidados summary{cursor:pointer}
.mm-cuidados-ver{font-weight:700; text-decoration:underline; color:var(--belk-paper-brand,#143A7D)}
.mm-cuidados[open] .mm-cuidados-ver{display:none}
.mm-cuidados ul{margin:8px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:4px}
/* La confirmación y el enlace privado */
.mm-confirma{
  display:flex; flex-direction:column; gap:10px; padding:14px;
  background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D2350);
  border:2px solid var(--belk-paper-ok,#2E6B4F); border-radius:var(--belk-radius-sm,8px);
}
.mm-confirma-titulo{font-size:1.35rem; font-weight:800; color:var(--belk-paper-text,#0D2350)}
.mm-confirma-texto{font-size:16px; font-weight:600; color:var(--belk-paper-text,#0D2350)}
.mm-enlace{
  font:inherit; font-size:14px; padding:10px 12px; min-height:44px; width:100%;
  background:var(--belk-paper-alt,#F5F8FC); color:var(--belk-paper-text,#0D2350);
  border:1px solid var(--belk-border-strong,rgba(13,35,80,.18)); border-radius:var(--belk-radius-sm,8px);
}
.mm a.belk-btn{text-decoration:none}
.mm-ver-pedido{font-size:15px; font-weight:700; color:var(--belk-paper-brand,#143A7D)}
/* La vista privada del cliente (?p=): el mismo visor arriba, su pedido en el panel. */
.mm[data-modo="pedido"] .mm-progreso, .mm[data-modo="pedido"] .mm-nav,
.mm[data-modo="pedido"] .mm-final, .mm[data-modo="pedido"] #mmOpciones{display:none}
.mm-vista{display:flex; flex-direction:column; gap:12px}
.mm-vista-hola{font-size:16px; font-weight:600; color:var(--belk-paper-muted,#414B5C)}
.mm-vista-hola:empty{display:none}
.mm-vista-que{font-size:16px; font-weight:600; color:var(--belk-paper-text,#0D2350)}
.mm-estado{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0}
.mm-estado li{position:relative; display:flex; align-items:center; gap:10px; padding:8px 0; font-size:15px; color:var(--belk-paper-muted,#414B5C)}
.mm-estado-punto{width:16px; height:16px; flex:none; border-radius:50%; background:var(--belk-paper,#FFFFFF);
  border:2px solid var(--belk-border-strong,rgba(13,35,80,.18))}
.mm-estado li.es-hecho{color:var(--belk-paper-text,#0D2350)}
.mm-estado li.es-hecho .mm-estado-punto{background:var(--belk-paper-brand,#143A7D); border-color:var(--belk-paper-brand,#143A7D)}
.mm-estado li.es-ahora{font-weight:800; color:var(--belk-paper-text,#0D2350)}

/* ── Escritorio: el 3D a la izquierda, la pregunta a la derecha ── */
@media (min-width:900px){
  .mm-cuerpo{grid-template-columns:minmax(0, 1fr) 420px; align-items:start}
  .mm-lienzo{height:min(64vh, 640px)}
  .mm[data-paso="listo"] .mm-lienzo{height:min(74vh, 760px)}
  .mm-panel{position:sticky; top:12px; max-height:calc(100vh - 24px); overflow:auto}
  .mm-opciones{grid-template-columns:1fr 1fr}
  .mm-opciones.mm-tipos{grid-template-columns:1fr 1fr 1fr}
}
/* Teléfono: el 3D arriba, chico y PEGADO mientras se eligen opciones (se ve cambiar
   al tocar). En las medidas y en «¡Listo!» se suelta: el teclado se come el alto. */
@media (max-width:899px){
  .mm-visor{padding:8px; gap:6px}
  .mm-lienzo{height:34vh; min-height:220px}
  .mm-herr{position:absolute; top:16px; right:16px; flex-wrap:nowrap; gap:6px}
  .mm-herr .belk-btn{flex:none; min-height:40px; padding:8px 12px; font-size:14px}
  .mm-visor{position:relative}
  .mm-pista{display:none}
  .mm[data-paso="tipo"] .mm-visor, .mm[data-paso="fuera"] .mm-visor,
  .mm[data-paso="guardar"] .mm-visor, .mm[data-paso="color"] .mm-visor{position:sticky; top:0; z-index:5}
  .mm[data-paso="listo"] .mm-lienzo{height:48vh}
  .mm-opciones .mm-op-tipo{min-height:80px}
}
@media (max-width:380px){
  .mm main.mm-main{padding:0 8px 24px}
  .mm .phdr-tag{display:none}
}

/* El juego (fases M3–M5b, ?v2=1) vive desde el 2026-10-20 en css/juego.css (compartido con el
   Diseño 3D paso a paso); mi-mueble.html lo carga justo después de este archivo. */

/* ── «Tus muebles»: guardar con Google (28-oct, dueño; js/mi-mueble/cuenta.js) ──────────────
   Una tarjeta de papel con su filo, en «¡Listo!» y en la portada. El estado es UN atributo
   (data-cuenta = fuera | dentro) y lo lee el CSS. El texto de los Términos va en letra chica
   justo antes de cada botón de Google; «Cerrar sesión» es discreto, junto al correo. */
.mm .mm-cuenta{
  display:flex; flex-direction:column; gap:8px; margin:12px 0; padding:12px; border-radius:12px;
  background:var(--belk-paper-alt,#F5F5F5); color:var(--belk-paper-text,#111111);
  border:1px solid var(--belk-paper-border,#DFDFDF);
}
.mm .mm-cuenta[hidden], .mm .mm-cuenta-aviso[hidden], .mm .mm-cuenta-error[hidden], .mm .mm-cuenta [data-cuenta-lista][hidden]{display:none}
.mm .mm-cuenta[data-cuenta="fuera"] .mm-cuenta-dentro, .mm .mm-cuenta[data-cuenta="dentro"] .mm-cuenta-fuera{display:none}
.mm .mm-cuenta-fuera, .mm .mm-cuenta-dentro{display:flex; flex-direction:column; gap:8px}
.mm .mm-cuenta:not(.mm-cuenta--inicio) .mm-cuenta-dentro{flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between}
/* En la portada no se estira a lo ancho del PC: «Recuperar…» del ancho de «Empezar», la lista a 720. */
.mm .mm-cuenta--inicio{width:100%; max-width:720px; margin-inline:auto; box-sizing:border-box}
.mm .mm-cuenta--inicio[data-cuenta="fuera"]{max-width:420px; text-align:center}
.mm .mm-cuenta-titulo{margin:0; font-size:1.05rem; font-weight:800; color:var(--belk-paper-text,#111111)}
.mm .mm-cuenta .mm-ayuda{margin:0}
.mm .mm-legal{margin:0; font-size:13px; line-height:1.4; color:var(--belk-paper-muted,#484848)}
.mm .mm-legal a{color:var(--belk-paper-text,#111111); text-decoration:underline; text-underline-offset:2px}
.mm .mm-cuenta-estado{margin:0; flex:1; min-width:0; font-size:15px; font-weight:700; color:var(--belk-paper-text,#111111); overflow-wrap:anywhere}
/* El error se marca con el BORDE (SELLO §6). */
.mm .mm-cuenta-estado.es-error{font-weight:600; padding-left:10px; border-left:3px solid var(--belk-paper-err,#8E3B31)}
.mm .mm-cuenta-error{
  margin:0; font-size:15px; padding:8px 10px; border-radius:8px;
  background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#111111); border:2px solid var(--belk-paper-err,#8E3B31);
}
.mm .mm-cuenta-salir{
  flex:none; min-height:48px; min-width:48px; padding:0 8px; border:0; border-radius:8px; background:none; cursor:pointer;
  font:inherit; font-size:14px; color:var(--belk-paper-muted,#484848); text-decoration:underline; text-underline-offset:2px;
}
.mm .mm-cuenta-salir:focus-visible{outline:2px solid var(--belk-paper-text,#111111); outline-offset:2px}
.mm .mm-cuenta-quien{
  margin:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px;
  font-size:14px; color:var(--belk-paper-muted,#484848); overflow-wrap:anywhere;
}
/* «Tus muebles»: miniatura (o la silueta del tipo), tipo y fecha; «Seguir editando» y «Borrar». */
.mm .mm-cuenta-lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.mm .mm-cuenta-item{
  display:grid; grid-template-columns:72px minmax(0, 1fr); gap:6px 12px; align-items:center; padding:8px; border-radius:10px;
  background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#111111); border:1px solid var(--belk-paper-border,#DFDFDF);
}
.mm .mm-cuenta-foto{
  width:72px; height:72px; border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:var(--belk-paper-alt,#F5F5F5); color:var(--belk-paper-muted,#484848); border:1px solid var(--belk-paper-border,#DFDFDF);
}
.mm .mm-cuenta-foto img{width:100%; height:100%; object-fit:cover; display:block}
.mm .mm-cuenta-foto svg{width:36px; height:36px}
.mm .mm-cuenta-info{display:flex; flex-direction:column; min-width:0}
.mm .mm-cuenta-tipo{font-size:15px; font-weight:800}
.mm .mm-cuenta-fecha{font-size:14px; color:var(--belk-paper-muted,#484848)}
/* Teléfono: los botones en su propia fila, a lo ancho; desde 600 px, a la derecha del tipo y la fecha. */
.mm .mm-cuenta-acciones{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.mm .mm-cuenta-acciones > .belk-btn{flex:1 1 auto}
@media (min-width:600px){
  .mm .mm-cuenta-item{grid-template-columns:72px minmax(0, 1fr) auto}
  .mm .mm-cuenta-acciones{grid-column:auto; justify-content:flex-end; max-width:340px}
  .mm .mm-cuenta-acciones > .belk-btn{flex:none}
}
.mm .mm-cuenta-acciones .belk-btn{min-height:48px}
.mm .mm-cuenta-preg{width:100%; font-size:14px; font-weight:600}
/* El aviso por inactividad: no bloquea (sin telón), sobre la cápsula como el de «Deshacer». */
.mm .mm-cuenta-aviso{
  position:fixed; z-index:22; left:max(16px, env(safe-area-inset-left, 0px)); right:max(16px, env(safe-area-inset-right, 0px));
  bottom:calc(12px + 56px + 10px + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; gap:8px; padding:14px 16px; border-radius:var(--belk-radius,1rem);
  background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#111111);
  border:1px solid var(--belk-paper-border,#DFDFDF); box-shadow:var(--belk-shadow-2,0 8px 24px rgba(0,0,0,.10));
  animation:mm-cuenta-entra .14s cubic-bezier(.16,1,.3,1);
}
.mm .mm-cuenta-aviso-txt{margin:0; font-size:17px; font-weight:700; color:var(--belk-paper-text,#111111)}
.mm .mm-cuenta-aviso-botones{display:grid; grid-template-columns:1fr auto; gap:8px}
.mm .mm-cuenta-aviso-botones .belk-btn{min-height:48px}
@keyframes mm-cuenta-entra{from{opacity:0; transform:translateY(8px)}}
@media (min-width:900px){
  .mm .mm-cuenta-aviso{left:max(16px, calc((100vw - 1280px) / 2 + 16px)); right:auto; width:400px; bottom:calc(24px + 56px + 10px)}
}
@media (prefers-reduced-motion:reduce){ .mm .mm-cuenta-aviso{animation:none} }

/* ── El estilo PRIMERO (28-oct, runner mm-estilo-selector): diez tarjetas grandes con foto en el
   carrusel, «Ver más estilos» con los 50 (buscador, familias, manillas, madera) y, en «¡Listo!», el
   estilo elegido con «Cambiar estilo». Solo tamaño y layout: los colores, por token. ── */
.mm .mmj-estilo-grande{justify-content:flex-start; text-align:left}
.mm .mmj-estilo-grande .mmj-estilo-foto{height:128px; border-radius:12px}
.mm .mmj-estilo-grande > span:not(.mmj-estilo-foto){font-size:16px; font-weight:700}
/* La foto del estilo va ENCIMA de sus dos muestras; mientras no exista, se ven las muestras. */
.mm .mmj-estilo-foto .mmj-estilo-img{position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover}
.mm .mmj-estilo-frase{font-size:14px; font-weight:400; line-height:1.3; color:var(--belk-paper-muted,#414B5C); text-wrap:pretty}
.mm .mmj-estilo-mdf{
  align-self:flex-start; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700;
  background:var(--belk-paper-alt,#F5F8FC); color:var(--belk-paper-text,#0D2350); border:1px solid var(--belk-paper-border,rgba(13,35,80,.10));
}
.mm .mmj-ver-mas{min-height:48px}
/* El modo experto: dentro de la misma pantalla, debajo del carrusel. */
.mm .mmj-experto{
  display:flex; flex-direction:column; gap:10px; padding:12px; border-radius:var(--belk-radius,1rem);
  background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D2350); border:1px solid var(--belk-paper-border,rgba(13,35,80,.10));
}
.mm .mmj-experto-tit{margin:0; font-size:17px; font-weight:700; color:var(--belk-paper-text,#0D2350)}
.mm .mmj-buscar input{min-height:48px; font-size:16px}
/* Las familias: una fila que se desliza con el dedo (no se come el alto). */
.mm .mmj-familias{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
.mm .mmj-familias::-webkit-scrollbar{display:none}
.mm .mmj-familias .belk-btn{flex:none; min-height:44px}
.mm .mmj-filtros .belk-btn{flex:1 1 calc(50% - 6px); min-height:44px}
.mm .mmj-estilos-cuantos{margin:0; font-size:14px; font-weight:600; color:var(--belk-paper-muted,#414B5C)}
.mm .mmj-estilos-todos{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px}
.mm .mmj-estilo-mini{justify-content:flex-start; text-align:left; min-height:0; padding:6px 6px 10px; gap:4px; font-size:15px}
.mm .mmj-estilo-mini .mmj-estilo-foto{height:84px}
.mm .mmj-estilo-mini .mmj-estilo-frase{font-size:13px}
.mm .mmj-estilos-vacio{grid-column:1 / -1; margin:0; font-size:15px; color:var(--belk-paper-muted,#414B5C)}
.mm .mmj-estilos-todos > .belk-btn{grid-column:1 / -1; justify-self:start}
/* «¡Listo!»: el estilo elegido y «Cambiar estilo». */
.mm .mmj-estilo-res{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin:0;
  font-size:15px; font-weight:600; color:var(--belk-paper-text,#0D2350)}
.mm .mmj-estilo-res .belk-btn{min-height:44px}
/* 28-oct (isla): «¿Le sumamos una isla?» y «Solo una isla». Sobre el papel del panel: paper-*. */
.mm .mmj-opciones--isla{display:flex; flex-direction:column; gap:10px}
.mm .mmj-isla-cab{display:flex; flex-direction:column; gap:2px}
.mm .mmj-isla-nombre{margin:0; font-size:17px; font-weight:700; color:var(--belk-paper-text,#0D2350)}
.mm .mmj-isla-frase, .mm .mmj-isla-pista{font-size:15px; font-weight:400; color:var(--belk-paper-muted,#414B5C)}
.mm .mmj-isla-sub{margin:4px 0 0; font-size:15px; font-weight:600; color:var(--belk-paper-text,#0D2350)}
.mm .mmj-isla-medidas{display:flex; flex-direction:column; gap:8px; padding:10px 12px; border-radius:12px;
  border:1px solid var(--belk-paper-border,rgba(13,35,80,.10)); background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D2350)}
.mm .mmj-isla-rango-tit{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.mm .mmj-isla-rango output{font-variant-numeric:tabular-nums; color:var(--belk-paper-text,#0D2350)}
.mm .mmj-isla-rango input[type=range]{width:100%; min-height:44px; margin:0; padding:0; border:0; background:none;
  accent-color:var(--belk-paper-brand,#143A7D)}
.mm .mmj-isla-no{margin:0; padding:10px 12px; border-radius:12px; font-size:15px; line-height:1.4;
  border:1px solid var(--belk-paper-border,rgba(13,35,80,.10)); background:var(--belk-paper-alt,#F5F8FC); color:var(--belk-paper-text,#0D2350)}
.mm .mmj-isla-decide .belk-btn{min-height:44px}
/* 28-oct (mm-modelos): «¿Cómo quieres tu cocina?». La tarjeta del modelo: su miniatura sacada del 3D
   (assets/mi-mueble/modelos/<id>.webp) y, mientras no esté, el dibujo de lo que lo distingue. */
.mm .mmj-tarjeta--modelo .mmj-dibujo{width:100%; height:96px; padding:12px 0; box-sizing:border-box; border-radius:12px;
  background:var(--belk-paper-alt,#F5F8FC); border:1px solid var(--belk-paper-border,rgba(13,35,80,.10))}
.mm .mmj-estilo-mini.mmj-tarjeta--modelo .mmj-dibujo{height:72px; padding:10px 0}
.mm .mmj-modelo-img{display:none; width:100%; height:128px; object-fit:cover; border-radius:12px;
  border:1px solid var(--belk-paper-border,rgba(13,35,80,.10))}
.mm .mmj-estilo-mini .mmj-modelo-img{height:84px}
.mm .mmj-modelo-img.is-lista{display:block}
.mm .mmj-tarjeta--modelo.con-foto .mmj-dibujo{display:none}
/* La cocina pasillo suma una cuarta forma: dos por fila. */
.mm .mmj-opciones--cuatro{grid-template-columns:repeat(2, minmax(0, 1fr))}
@media (min-width:900px){
  /* PC: el carrusel de estilos con tarjetas grandes (≈ 2,2 a la vista en la columna de 400 px). */
  .mm .mmj-opciones--color .mmj-carrusel::before, .mm .mmj-opciones--color .mmj-carrusel::after{flex-basis:calc(27cqi - 12px)}
  .mm .mmj-opciones--color .mmj-carta.mmj-estilo-grande{flex-basis:46cqi; font-size:15px; padding:8px 8px 10px; gap:6px}
  .mm .mmj-opciones--color .mmj-carta.mmj-estilo-grande .mmj-estilo-foto{height:104px; border-radius:12px}
  .mm .mmj-estilo-grande .mmj-estilo-frase{font-size:13px}
}