/* ═══════════════════════════════════════════════════════════════
   Criminal Mambo — Estudio SIMPLE V6
   Objetivo: menos botones, menos opciones, más claro y profesional.
   Se carga ÚLTIMO para pisar estilos anteriores.
   ═══════════════════════════════════════════════════════════════ */

/* (pestañas de herramientas y sliders de posición ahora se muestran de nuevo:
   el diseño V7 las pone en un panel de herramientas discreto) */

/* ---------- 2) Hero más limpio y profesional ---------- */
.mock-hero{padding:22px 16px 6px;text-align:left}
.mock-hero .mock-hero-eye{margin-bottom:8px}
.mock-hero h1{font-size:clamp(22px,7vw,34px);line-height:1.05}
.mock-hero .tag{max-width:620px;margin:0;font-size:13px}
@media(max-width:800px){
  .mock-hero{padding:16px 12px 4px;text-align:center}
  .mock-hero .tag{margin:0 auto}
}

/* ---------- 3) Panel de configuración: pasos numerados claros ---------- */
.side-panel h3{font-size:14px;letter-spacing:.4px;display:flex;align-items:center;gap:7px;margin:12px 0 8px}
.side-panel h3 .num{
  width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--red),var(--red-dark));
  color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;flex-shrink:0;
}

/* ---------- 4) Prenda al frente: tarjetas de tipo más limpias ---------- */
/* (se conservan las mismas clases para no romper el render) */

/* ---------- 5) "¿Dónde querés la estampa?" más claro ---------- */
.print-mode-wrap{margin-top:10px;padding:11px;border:1px solid var(--border-2);border-radius:11px;background:var(--bg-3)}
.print-mode-label{font-size:11px;font-weight:900;color:var(--yellow);text-transform:uppercase;letter-spacing:.6px;margin-bottom:7px}
.print-mode-btn{flex:1;padding:10px 6px;font-size:11px;border-radius:9px}

/* Ranura de subida más grande y clara */
.mode-upload-slot{min-height:96px}
.mode-upload-slot b{font-size:12px}
.mode-upload-slot small{font-size:10px}
.mode-upload-slot .mus-preview{width:56px;height:46px}

/* ---------- 6) Vista previa protagonista ---------- */
.preview-panel{margin-top:12px}
.preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.preview-title{font-size:12px;font-weight:900;color:#fff;text-transform:uppercase;letter-spacing:.6px}

/* ---------- 7) Acciones grandes y claras ---------- */
.acciones{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.acciones .mock-btn{width:100%;padding:14px;font-size:13px;border-radius:11px}
#btnCompartir{font-size:12px}

/* Información de producción: texto más breve y legible */
.mock-aviso{font-size:12px;line-height:1.5;padding:11px 13px;border-radius:10px}
.mock-aviso ul{margin:6px 0 0 16px;padding:0}
.mock-aviso li{margin:3px 0}