/* ── 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 marca «mimueble» (1-nov, dueño: «Aprobado, mimueble», logo B con el mueblecito) ──
   Mi mueble es su propia marca, más suave para el cliente (inspiración: Rosen, CIC): crema de
   fondo, oliva de primario (el fondo del logo del dueño), terracota de acento y tinta carbón.
   Reemplaza la paleta gris/negra del 28-oct (el piso de madera del 3D se queda). Es la
   DEFINICIÓN de los tokens en este ámbito (por eso aquí sí hay hex): solo bajo body.mm; el Diseño
   3D y las demás páginas siguen con foundation.css. Contrastes WCAG medidos: texto 12,1 sobre
   crema · muted 6,0 (5,6 sobre la tarjeta elegida) · oliva 4,8 sobre crema y 5,3 sobre el papel ·
   crema sobre oliva 5,3 · terracota 4,7 como tinta y 5,6 con blanco encima.
   Mismo día (dueño, «me gusta el b y el botón un poco más pequeño y más pastel»): fondo más claro
   #FAF6F0 (opción B; tarjetas blancas para que se despeguen) y el botón principal oliva pastel
   #B7BE98 con tinta oliva oscura #2F3320 (6,7; 5,4 en el hover). El oliva fuerte queda para
   bordes, lo elegido y el logo (5,2 sobre el fondo nuevo). */
body.mm{
  --belk-paper:#FFFFFF; --belk-paper-text:#2E2A24; --belk-paper-muted:#5E574D;
  --belk-paper-border:rgba(46,42,36,.14); --belk-paper-alt:#FAF6F0; --belk-paper-sunken:#F1EADF;
  --belk-paper-hint:#746C60; --belk-paper-brand:#646B47; --belk-on-paper-brand:#FBF7F1;
  --belk-paper-ok:#3F6B3A; --belk-paper-warn:#8F4A22; --belk-border-strong:rgba(46,42,36,.22);
  --belk-shadow-1:0 2px 8px rgba(46,42,36,.08); --belk-shadow-2:0 8px 24px rgba(46,42,36,.14);
  --belk-accent:#9A5638; --belk-on-accent:#FFFFFF; --belk-accent-hover:#7F452C;
  --belk-brand:#B7BE98; --belk-brand-hover:#A4AC80; --belk-on-brand:#2F3320;
  --belk-brand-soft:#FAF6F0; --belk-level-2:#FAF6F0; --belk-level-2-hi:#F1EADF; --belk-text:#2E2A24;
  --belk-link:#4C5234;
  --belk-fondo-3d:#FAF6F0;   /* el fondo de la escena 3D (lo lee js/mi-mueble/sala-blanca.js) */
  /* Letra de la marca: Outfit (redonda, como el logo) en títulos y botones; Nunito Sans en el texto. */
  --mm-letra-titulo:'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mm-letra-texto:'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* 2-nov (dueño: «los botones de abajo… hazlos glass en ese color»): el vidrio oliva. Relleno
     translúcido del pastel con un brillo arriba; la tinta sigue #2F3320 (≥ 6 sobre la mezcla). */
  --mm-vidrio-oliva:linear-gradient(180deg, rgba(196,203,166,.82) 0%, rgba(167,176,130,.72) 100%);
  --mm-vidrio-oliva-hover:linear-gradient(180deg, rgba(186,194,152,.9) 0%, rgba(154,163,116,.8) 100%);
  --mm-vidrio-claro:linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.38) 100%);
  --mm-vidrio-borde:rgba(255,255,255,.7);
  --mm-vidrio-filo:rgba(100,107,71,.28);
  --mm-vidrio-brillo:inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(100,107,71,.12);
  --mm-vidrio-sombra:0 8px 22px rgba(100,107,71,.18);
  --mm-vidrio-terracota:linear-gradient(180deg, rgba(196,124,92,.94) 0%, rgba(160,92,62,.94) 100%);
  --mm-vidrio-terracota-hover:linear-gradient(180deg, rgba(184,112,80,.96) 0%, rgba(146,82,54,.96) 100%);
  --mm-vidrio-terracota-sombra:0 8px 22px rgba(154,86,56,.26);
  font-family:var(--mm-letra-texto);
}
/* 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}
}

/* ── La marca «mimueble» en el juego (1-nov) ──────────────────────────────────────────────
   Va con body.mm (pesa más que el `.mm …` de css/juego.css, que se carga después y es
   compartido con el Diseño 3D, que sigue marino). La página es crema; las tarjetas, un papel
   más claro con esquinas más redondas; títulos y botones en Outfit, como el logo. */
body.mm[data-v2], body.mm .mmj{background:var(--belk-paper-alt,#FAF6F0)}
body.mm .mmj-lienzo{background:var(--belk-paper-alt,#FAF6F0)}
body.mm .mmj-pregunta, body.mm .belk-btn, body.mm .mmj-capsula-ir, body.mm .mmj-marca-txt{font-family:var(--mm-letra-titulo)}
body.mm .mmj-pregunta{font-weight:600; letter-spacing:-0.015em}
body.mm .mmj-tarjeta{border-radius:16px}
body.mm .mm-anf-burbuja{border-radius:4px 16px 16px 16px; background:var(--belk-paper,#FFFFFF)}
/* El logo: el mueblecito y «mimueble» en oliva; «por Belk» chico y gris. */
body.mm .mmj-marca{gap:7px; color:var(--belk-paper-brand,#646B47)}
body.mm .mmj-marca-simbolo{display:block; flex:none; width:30px; height:26px}
body.mm .mmj-marca-txt{font-size:21px; font-weight:700; letter-spacing:-0.02em; line-height:1; color:var(--belk-paper-brand,#646B47)}
body.mm .mmj-marca-sol{font-family:var(--mm-letra-texto); font-size:12px; font-weight:600; letter-spacing:0; color:var(--belk-paper-muted,#5E574D)}
/* El botón «Empezar» (y los de «seguir donde quedé»), más chico: el pastel no necesita tanto bulto. */
body.mm .mmj-empezar{max-width:300px; min-height:48px; font-size:16px; font-weight:600; box-shadow:var(--belk-shadow-1,0 2px 8px rgba(46,42,36,.08))}
body.mm .mmj-memoria-botones .belk-btn{min-height:48px; font-size:15px}

/* ── Portada (2-nov, dueño: «Adam está muy grande y los botones de abajo no me gustan: hazlos
   glass en ese color») ── En el PC Adam va en una columna angosta (antes 42 % del ancho) y el 3D
   se queda con el resto. «Empezar», «Seguir donde quedé» y «Empezar de nuevo» son de vidrio: el
   oliva pastel translúcido con su brillo, y los secundarios («Empezar de nuevo», «Recuperar mi mueble
   con Google») un vidrio claro con filo oliva. */
@media (min-width:900px){
  body.mm[data-pantalla="inicio"] .mmj-escenario{grid-template-columns:minmax(0, 260px) minmax(0, 1fr); gap:24px}
  body.mm[data-pantalla="inicio"] .mm-anf--entero .mm-anf-fig{width:200px; align-self:center}
  body.mm[data-pantalla="inicio"] .mm-anf--entero .mm-anf-burbuja{font-size:14px}
}
body.mm .mmj-memoria{background:transparent; border-color:var(--mm-vidrio-filo); align-self:center; width:100%; max-width:640px; box-sizing:border-box}
body.mm .mmj-empezar, body.mm .mmj-memoria-botones .belk-btn, body.mm [data-cuenta-entrar]{
  -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--mm-vidrio-borde); box-shadow:var(--mm-vidrio-brillo), var(--mm-vidrio-sombra);
  transition:background var(--belk-transition,.18s ease), transform .12s ease;
}
body.mm .mmj-empezar, body.mm .mmj-memoria-botones .belk-btn--primary{background:var(--mm-vidrio-oliva); color:var(--belk-on-brand,#2F3320)}
body.mm .mmj-memoria-botones .belk-btn:not(.belk-btn--primary), body.mm [data-cuenta-entrar]{background:var(--mm-vidrio-claro); color:var(--belk-paper-text,#2E2A24); border-color:var(--mm-vidrio-filo)}
@media (hover:hover){
  body.mm .mmj-empezar:hover, body.mm .mmj-memoria-botones .belk-btn--primary:hover{background:var(--mm-vidrio-oliva-hover)}
  body.mm .mmj-memoria-botones .belk-btn:not(.belk-btn--primary):hover, body.mm [data-cuenta-entrar]:hover{background:rgba(255,255,255,.85)}
}
body.mm .mmj-empezar:active, body.mm .mmj-memoria-botones .belk-btn:active, body.mm [data-cuenta-entrar]:active{transform:scale(.98)}

/* ── «Terminar» en los módulos (3-nov, dueño: «un globo que apunte a terminar, el botón de otro color
   más vistoso sin exagerar; que se entienda que no hay que editar cajón por cajón») ── Vidrio
   terracota (el acento de la marca) y, encima, un globo oliva con su punta hacia el botón. */
body.mm .mmj-terminar{
  -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
  background:var(--mm-vidrio-terracota); color:var(--belk-on-accent,#FFF); border:1px solid var(--mm-vidrio-borde);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), var(--mm-vidrio-terracota-sombra);
  font-size:17px; font-weight:600; transition:background var(--belk-transition,.18s ease), transform .12s ease;
}
@media (hover:hover){ body.mm .mmj-terminar:hover{background:var(--mm-vidrio-terracota-hover); color:var(--belk-on-accent,#FFF)} }
body.mm .mmj-terminar:active{transform:scale(.98)}
.mmj-globo-terminar{
  grid-column:1 / -1; position:relative; justify-self:center; max-width:420px; margin:2px 0 10px; padding:10px 16px;
  border-radius:14px; background:var(--belk-paper-brand,#646B47); color:var(--belk-on-paper-brand,#FBF7F1);
  font-size:15px; font-weight:600; line-height:1.4; text-align:center;
  box-shadow:0 6px 16px rgba(46,42,36,.16); animation:mm-globo-sube .5s ease-out;
}
.mmj-globo-terminar[hidden]{display:none}
.mmj-globo-terminar::after{
  content:''; position:absolute; left:50%; bottom:-8px; margin-left:-9px;
  border:9px solid transparent; border-bottom:0; border-top-color:var(--belk-paper-brand,#646B47);
}
@keyframes mm-globo-sube{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .mmj-globo-terminar{animation:none} }