/* ═══════════════════════════════════════════════════════════════
   vitrina.css — LA VITRINA DEL TALLER (conexión cliente ↔ taller, fase 2, 2026-10-27)
   Dos páginas, un dibujo:
     · taller.html (pública, lienzo claro como Mi mueble: foundation → components → publico → esto)
     · mi-vitrina.html (el taller arma la suya: shell del taller con .subpage; la vista previa
       «Así te ven los clientes» es el MISMO dibujo, sobre papel blanco)
   Solo layout y tamaño; colores = tokens con su respaldo. Lo que pinta sobre papel usa
   --belk-paper-* (SELLO-UI §2, regla 0). Sin :root propio.
   ═══════════════════════════════════════════════════════════════ */

/* ══ 1. La vitrina (pública y vista previa) ══════════════════════ */
body.vt{ background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D2350); margin:0; }
.vt-main{ max-width:1080px; margin:0 auto; padding:12px 16px 48px; }
.vt-cargando{ padding:48px 8px; text-align:center; font-size:16px; color:var(--belk-paper-muted,#414B5C); }
.vt .phdr-back[hidden]{ display:none; }

.vt-ficha{ display:flex; flex-direction:column; gap:20px; color:var(--belk-paper-text,#0D2350); }

/* Portada: la foto del taller grande, el logo encima */
.vt-portada{ position:relative; display:flex; flex-direction:column; gap:12px; }
.vt-cubierta{
  aspect-ratio:16 / 7; border-radius:var(--belk-radius,1rem); overflow:hidden;
  background:var(--belk-paper-alt,#F5F8FC); border:1px solid var(--belk-paper-border,rgba(13,35,80,.10));
}
.vt-cubierta--vacia{ aspect-ratio:16 / 4; }
.vt-cubierta-img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Solo el logo se monta sobre la foto; el nombre va debajo de ella (sobre la foto no se lee). */
.vt-id{ display:flex; align-items:flex-start; gap:14px; margin-top:-48px; padding:0 12px; }
.vt-logo{
  width:96px; height:96px; flex:none; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:var(--belk-paper,#FFFFFF); border:3px solid var(--belk-paper,#FFFFFF);
  box-shadow:0 0 0 1px var(--belk-paper-border,rgba(13,35,80,.10)), var(--belk-shadow-1,0 2px 8px rgba(13,35,80,.08));
}
.vt-logo img{ width:100%; height:100%; object-fit:cover; display:block; }
.vt-logo-ini{ font-size:30px; font-weight:800; color:var(--belk-paper-brand,#143A7D); }
.vt-id-tx{ min-width:0; padding-top:54px; }
.vt-nombre{ margin:0; font-size:1.6rem; line-height:1.15; font-weight:800; color:var(--belk-paper-text,#0D2350); overflow-wrap:anywhere; }
.vt-sellos{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0; }
.vt-sello{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font-size:13px; font-weight:700;
  background:var(--belk-ok-soft,#E4EFE9); color:var(--belk-paper-ok,#2E6B4F); border:1px solid var(--belk-paper-border,rgba(13,35,80,.10));
}
.vt-sello svg{ width:15px; height:15px; fill:currentColor; }
.vt-desde{ margin:6px 0 0; font-size:14px; color:var(--belk-paper-muted,#414B5C); }
.vt-wa{ align-self:flex-start; text-decoration:none; }
.vt-wa svg{ width:20px; height:20px; fill:currentColor; }

/* Lo que calcula Belk */
.vt-cifras{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.vt-cifra{
  display:flex; flex-direction:column; gap:2px; padding:12px; border-radius:var(--belk-radius-sm,8px);
  background:var(--belk-paper-alt,#F5F8FC); border:1px solid var(--belk-paper-border,rgba(13,35,80,.10));
}
.vt-cifra b{ font-size:1.25rem; font-weight:800; color:var(--belk-paper-text,#0D2350); }
.vt-cifra span{ font-size:13px; line-height:1.3; color:var(--belk-paper-muted,#414B5C); }
.vt-desc{ margin:0; font-size:16px; line-height:1.55; color:var(--belk-paper-text,#0D2350); max-width:70ch; }

/* Secciones */
.vt-sec{ display:flex; flex-direction:column; gap:10px; }
.vt-sec-tit{ margin:0; font-size:1.15rem; font-weight:800; color:var(--belk-paper-text,#0D2350); }
.vt-vacio{ margin:0; font-size:15px; color:var(--belk-paper-muted,#414B5C); }

/* Galería: las fotos son las protagonistas */
.vt-galeria{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.vt-g{
  position:relative; display:block; padding:0; margin:0; border:1px solid var(--belk-paper-border,rgba(13,35,80,.10));
  border-radius:var(--belk-radius-sm,8px); overflow:hidden; aspect-ratio:4 / 3; cursor:zoom-in;
  background:var(--belk-paper-alt,#F5F8FC); font:inherit;
}
.vt-g img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--belk-transition,.18s ease); }
.vt-g:hover img{ transform:scale(1.03); }
.vt-g:focus-visible{ outline:3px solid var(--belk-paper-brand,#143A7D); outline-offset:2px; }
.vt-g-pie{
  position:absolute; left:6px; bottom:6px; max-width:calc(100% - 12px); padding:3px 8px; border-radius:999px;
  font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D2350);
}

/* Los datos */
.vt-datos{ display:grid; grid-template-columns:1fr; gap:10px; }
.vt-dato{
  padding:12px 14px; border-radius:var(--belk-radius-sm,8px);
  background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D2350); border:1px solid var(--belk-paper-border,rgba(13,35,80,.10));
}
.vt-dato-tit{ margin:0 0 6px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--belk-paper-muted,#414B5C); }
.vt-dato-tx{ margin:0; font-size:15px; line-height:1.45; color:var(--belk-paper-text,#0D2350); }
.vt-chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.vt-chip{
  padding:4px 10px; border-radius:999px; font-size:14px; font-weight:600;
  background:var(--belk-paper-sunken,#E9F0F9); color:var(--belk-paper-text,#0D2350);
}
.vt-redes{ display:flex; flex-wrap:wrap; gap:12px; margin:0; }
.vt-red{ font-size:15px; font-weight:700; color:var(--belk-paper-brand,#143A7D); }

/* Cuidados (plan §6, versión corta) */
.vt-cuidados{
  padding:12px 14px; border-radius:var(--belk-radius-sm,8px); font-size:14px; line-height:1.5;
  background:var(--belk-paper-alt,#F5F8FC); color:var(--belk-paper-text,#0D2350); border:1px solid var(--belk-paper-border,rgba(13,35,80,.10));
}
.vt-cuidados p{ margin:4px 0 0; }

/* La foto grande */
.vt-foto{
  width:min(96vw, 1200px); max-height:94vh; margin:auto; padding:0; border:0; border-radius:var(--belk-radius-sm,8px);
  /* El visor es oscuro en las dos páginas: la tinta del papel de fondo y el papel de letra. */
  background:var(--belk-paper-text,#0D2350); color:var(--belk-paper,#FFFFFF);
}
.vt-foto::backdrop{ background:color-mix(in srgb, var(--belk-paper-text,#0D2350) 92%, transparent); }
.vt-foto-fig{ margin:0; display:flex; flex-direction:column; }
.vt-foto-img{ display:block; width:100%; max-height:84vh; object-fit:contain; }
.vt-foto-pie{ padding:10px 56px 12px 14px; font-size:15px; min-height:20px; }
.vt-foto-x{
  position:absolute; top:6px; right:6px; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; background:color-mix(in srgb, var(--belk-paper-text,#0D2350) 70%, transparent); color:var(--belk-paper,#FFFFFF); cursor:pointer; z-index:2;
}
.vt-foto-x svg{ width:20px; height:20px; fill:currentColor; }
.vt-foto-nav{
  position:absolute; top:calc(50% - 22px); width:44px; height:44px; border:0; border-radius:50%; z-index:2;
  font-size:28px; line-height:1; background:color-mix(in srgb, var(--belk-paper-text,#0D2350) 70%, transparent); color:var(--belk-paper,#FFFFFF); cursor:pointer;
}
.vt-foto-ant{ left:6px; } .vt-foto-sig{ right:6px; }
.vt-foto-nav[hidden]{ display:none; }

@media (min-width:640px){
  .vt-galeria{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
  .vt-datos{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .vt-nombre{ font-size:2rem; }
  .vt-logo{ width:120px; height:120px; }
  .vt-id{ margin-top:-60px; padding:0 20px; }
  .vt-id-tx{ padding-top:68px; }
  .vt-cubierta{ aspect-ratio:auto; height:clamp(220px, 36vw, 420px); }
  .vt-cubierta--vacia{ height:120px; }
}
@media (min-width:960px){
  .vt-portada{ display:grid; grid-template-columns:1fr auto; align-items:end; }
  .vt-cubierta{ grid-column:1 / -1; }
  .vt-wa{ align-self:end; margin-bottom:4px; }
  .vt-datos{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion:reduce){ .vt-g img{ transition:none; } .vt-g:hover img{ transform:none; } }

/* ══ 2. «Mi vitrina» (el taller la arma) ═════════════════════════ */
/* La marca del cajón ☰ (las otras páginas la escriben con style=; aquí, por token: el cajón es marino). */
.mv-marca{ display:flex; align-items:center; gap:8px; }
.mv-marca-tx{ font-size:14px; font-weight:900; letter-spacing:1px; color:var(--belk-text,#0D2350); }
.mv-marca-sub{ font-size:8px; letter-spacing:2px; color:var(--belk-text-muted,#414B5C); }
.subpage.mv-page{ max-width:1240px; padding-bottom:140px; }
.mv-grid{ display:grid; grid-template-columns:minmax(0, 1fr); gap:0; }
.mv-form{ min-width:0; }
.mv-obl, .mv-opc{
  margin-left:auto; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--belk-text-muted,#414B5C);
}
.mv-hint{ margin:0 0 10px; }
.mv-hint[hidden]{ display:none; }

/* El estado: % y lo que falta */
.mv-barra{
  height:10px; border-radius:10px; overflow:hidden; margin:2px 0 10px;
  background:var(--belk-level-1,#CDD8EA); border:1px solid var(--belk-border,rgba(13,35,80,.10));
}
.mv-barra-relleno{ display:block; height:100%; width:0; background:var(--belk-accent,#E87722); transition:width var(--belk-transition,.18s ease); }
.mv-chip-linea{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
.mv-chip-linea [hidden]{ display:none; }
.mv-nota{
  margin:0 0 10px; padding:10px 12px; border-radius:var(--belk-radius-sm,8px); font-size:14px;
  background:var(--belk-err-soft,#F8E7E3); color:var(--belk-err,#8E3B31); border:1px solid var(--belk-border,rgba(13,35,80,.10));
}
.mv-nota[hidden], .mv-falta[hidden]{ display:none; }
.mv-falta h3{ margin:4px 0 6px; font-size:13px; font-weight:700; color:var(--belk-text,#0D2350); }
.mv-falta ul{ list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:2px; }
.mv-falta-ir{
  display:flex; align-items:center; gap:8px; width:100%; min-height:36px; padding:6px 8px; text-align:left; cursor:pointer;
  font:inherit; font-size:14px; border:0; border-radius:var(--belk-radius-sm,8px); background:transparent; color:var(--belk-text,#0D2350);
}
.mv-falta-ir::before{ content:''; width:8px; height:8px; flex:none; border-radius:50%; background:var(--belk-accent,#E87722); }
.mv-falta--suma .mv-falta-ir::before{ background:var(--belk-text-muted,#414B5C); }
.mv-falta-mas{ padding:2px 8px 0 24px; font-size:13px; color:var(--belk-text-muted,#414B5C); }
.mv-falta-ir:hover{ background:var(--belk-level-2-hi,#F2F6FD); }
.mv-falta-ir:focus-visible{ outline:2px solid var(--belk-accent,#E87722); outline-offset:1px; }
.mv-ayuda{ margin:0 0 10px; }
.mv-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.mv-acts [hidden]{ display:none; }

/* Campos (el campo es papel: su texto, paper-text) */
.mv-campo{ display:flex; flex-direction:column; gap:4px; margin:0 0 12px; font-size:14px; font-weight:600; color:var(--belk-text,#0D2350); min-width:0; }
.mv-campo[hidden]{ display:none; }
.mv-campo small{ font-weight:400; font-size:13px; color:var(--belk-text-muted,#414B5C); }
.mv-campo input, .mv-campo select, .mv-campo textarea, .mv-combo-in, .mv-fila-mx input, .mv-sel-region, .mv-foto select, .mv-foto input{
  font:inherit; font-size:16px; font-weight:500; padding:9px 11px; min-height:44px; width:100%; box-sizing:border-box;
  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);
}
.mv-campo textarea{ resize:vertical; min-height:84px; }
.mv-campo input:focus-visible, .mv-campo select:focus-visible, .mv-campo textarea:focus-visible, .mv-combo-in:focus-visible,
.mv-fila-mx input:focus-visible, .mv-sel-region:focus-visible, .mv-foto select:focus-visible, .mv-foto input:focus-visible{
  outline:2px solid var(--belk-accent,#E87722); outline-offset:1px;
}
.mv-fila2, .mv-fila3{ display:grid; grid-template-columns:minmax(0, 1fr); gap:0 12px; }
.mv-pais, .mv-sino{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.mv-tgr{ padding:4px 0 8px; }
.mv-tgr .lb{ font-size:15px; font-weight:700; color:var(--belk-text,#0D2350); }
.mv-checks{ display:flex; flex-wrap:wrap; gap:8px 16px; margin:0 0 12px; font-size:15px; font-weight:500; color:var(--belk-text,#0D2350); }
.mv-checks label{ display:inline-flex; align-items:center; gap:8px; min-height:36px; cursor:pointer; }
.mv-checks input{ width:20px; height:20px; accent-color:var(--belk-accent,#E87722); }
.mv-wa{ display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.mv-wa .belk-btn{ align-self:flex-start; }
.mv-wa svg{ width:16px; height:16px; fill:currentColor; }

/* Subir logo, equipo y trabajos */
.mv-archivo{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.mv-subir-btn{ position:relative; cursor:pointer; }
.mv-subir-btn:focus-within{ outline:2px solid var(--belk-accent,#E87722); outline-offset:2px; }
.mv-subir-btn.is-disabled{ opacity:.5; cursor:not-allowed; pointer-events:none; }
.mv-subir-btn svg{ width:18px; height:18px; fill:currentColor; }
.mv-fotos2{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); gap:12px; margin:0 0 12px; }
.mv-subir{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.mv-subir-tit{ font-size:14px; font-weight:600; color:var(--belk-text,#0D2350); }
.mv-subir-caja{
  aspect-ratio:16 / 9; border-radius:var(--belk-radius-sm,8px); overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:var(--belk-paper-alt,#F5F8FC); border:1px dashed var(--belk-border-strong,rgba(13,35,80,.18));
}
.mv-subir-caja--logo{ aspect-ratio:1 / 1; border-radius:50%; max-width:140px; }
.mv-subir-caja img{ width:100%; height:100%; object-fit:cover; display:block; }
.mv-subir-vacio{ font-size:13px; color:var(--belk-paper-muted,#414B5C); }

.mv-galeria{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 136px), 1fr)); gap:10px; margin:0 0 12px; }
.mv-foto{
  margin:0; display:flex; flex-direction:column; border-radius:var(--belk-radius-sm,8px); overflow:hidden;
  background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D2350); border:1px solid var(--belk-border,rgba(13,35,80,.10));
}
.mv-foto img{ width:100%; aspect-ratio:4 / 3; object-fit:cover; display:block; height:auto; }
.mv-foto figcaption{ display:flex; flex-direction:column; gap:6px; padding:8px; }
.mv-foto select, .mv-foto input{ font-size:14px; min-height:40px; padding:6px 8px; }
.mv-foto .belk-btn{ align-self:flex-start; }
.mv-foto--molde{
  aspect-ratio:4 / 3; align-items:center; justify-content:center; font-size:14px; font-weight:600;
  background:var(--belk-paper-alt,#F5F8FC); color:var(--belk-paper-muted,#414B5C); border-style:dashed; opacity:.6;
}

/* Cobertura */
.mv-atajos{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px; }
.mv-atajos .mv-sel-region{ width:auto; flex:1 1 220px; min-width:0; max-width:100%; }
.mv-combo{ position:relative; margin:0 0 10px; }
.mv-combo-lista{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20; margin:0; padding:4px; list-style:none; max-height:300px; overflow: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));
}
.mv-combo-lista[hidden]{ display:none; }
.mv-combo-lista li{ display:flex; justify-content:space-between; gap:8px; padding:9px 10px; border-radius:6px; cursor:pointer; font-size:15px; }
.mv-combo-lista li:hover{ background:var(--belk-paper-sunken,#E9F0F9); }
.mv-combo-lista small{ color:var(--belk-paper-muted,#414B5C); }
.mv-combo-vacio{ cursor:default !important; color:var(--belk-paper-muted,#414B5C); }
.mv-fila-mx{ display:grid; grid-template-columns:minmax(0, 1fr); gap:8px; margin:0 0 10px; }
.mv-fila-mx .belk-btn{ justify-self:start; }
.mv-chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.mv-chip{
  display:inline-flex; align-items:center; gap:2px; padding:2px 2px 2px 12px; border-radius:999px; font-size:14px; font-weight:600;
  background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D2350); border:1px solid var(--belk-border,rgba(13,35,80,.10));
}
.mv-chip-x{
  width:32px; height:32px; border:0; border-radius:50%; background:transparent; cursor:pointer; font-size:13px;
  color:var(--belk-paper-muted,#414B5C);
}
.mv-chip-x:hover{ background:var(--belk-paper-sunken,#E9F0F9); }

/* Guardar: al final del formulario, en el flujo */
.mv-guardar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:12px; margin:4px 0 16px; }
.mv-guardar .belk-btn{ min-height:44px; padding:10px 24px; font-size:15px; }
.mv-guardar-tx{ margin:0; font-size:14px; color:var(--belk-text-muted,#414B5C); }

/* La vista previa: papel blanco con la vitrina en chico */
.mv-prev-papel{
  padding:14px; border-radius:var(--belk-radius-sm,8px); max-height:none;
  background:var(--belk-paper,#FFFFFF); color:var(--belk-paper-text,#0D2350); border:1px solid var(--belk-paper-border,rgba(13,35,80,.10));
}
.mv-prev-papel .vt-nombre{ font-size:1.3rem; }
.mv-prev-papel .vt-logo{ width:76px; height:76px; }
.mv-prev-papel .vt-id{ margin-top:-38px; padding:0 8px; }
.mv-prev-papel .vt-id-tx{ padding-top:44px; }
.mv-prev-papel .vt-datos{ grid-template-columns:1fr; }
.mv-prev-papel .vt-galeria{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.mv-prev-papel .vt-portada{ display:flex; }
.mv-prev-papel .vt-cubierta{ aspect-ratio:16 / 7; height:auto; }

@media (min-width:640px){
  .mv-fila2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .mv-fila3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .mv-fila-mx{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) auto; }
}
/* Escritorio: el formulario a la izquierda; el estado y la vista previa a la derecha (SELLO §12.6). */
@media (min-width:1024px){
  .mv-grid{ grid-template-columns:minmax(0, 1.25fr) minmax(360px, 1fr); grid-template-areas:'form estado' 'form prev'; grid-template-rows:auto 1fr; gap:0 16px; align-items:start; }
  .mv-form{ grid-area:form; }
  .mv-estado{ grid-area:estado; }
  .mv-prev{ grid-area:prev; position:sticky; top:72px; max-height:calc(100vh - 96px); overflow:auto; }
}