/* ═══════════════════════════════════════════════════════════════
   Criminal Mambo — Estudio profesional (definitivo)
   · Botones SOBRE la remera ahora discretos y prolijos.
   · Herramientas de diseño completas (Editar / Recortar / Ajustes).
   · Botón COMPARTIR grande y en AMARILLO.
   ═══════════════════════════════════════════════════════════════ */

/* ---------- HERO sobrio ---------- */
.mock-hero{padding:20px 16px 6px;text-align:left}
.mock-hero h1{font-size:clamp(20px,6vw,30px);letter-spacing:-.5px;line-height:1.05}
.mock-hero .tag{font-size:12.5px;max-width:620px;margin:0;color:var(--gray)}
@media(max-width:800px){
  .mock-hero{padding:14px 12px 2px;text-align:center}
  .mock-hero .tag{margin:0 auto}
}

/* ---------- Prenda compacta arriba ---------- */
@media(max-width:1000px){
  .studio{padding:0 9px 96px}
  .studio-grid{display:flex;flex-direction:column;gap:8px}
  .col-preview{order:1}
  .col-config{order:2}
  .preview-panel{position:relative;top:auto;padding:8px;border-radius:12px}
  .preview-wrap{min-height:44svh;max-height:46svh;border-radius:10px}
  .preview-canvas{max-height:44svh}
}

/* ---------- Botones sobre la remera: DISCRETOS y profesionales ---------- */
.preview-actions{
  position:absolute;left:0;right:0;bottom:0;z-index:8;
  display:flex;gap:8px;padding:12px 10px;
  background:linear-gradient(to top,rgba(0,0,0,.62),transparent);
}
.pa-btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 8px;border-radius:9px;border:1px solid rgba(255,255,255,.16);
  font-family:inherit;font-size:11px;font-weight:800;letter-spacing:.4px;
  cursor:pointer;transition:transform .14s, background .2s;min-height:38px;
  background:rgba(0,0,0,.72);color:#fff;backdrop-filter:blur(6px);
}
.pa-btn .pa-icon{font-size:15px;line-height:1}
.pa-btn:hover{background:rgba(0,0,0,.9);transform:translateY(-1px)}
.pa-btn-img{border-color:rgba(227,6,19,.55);color:#ffd0d0}
.pa-btn-text{border-color:rgba(255,213,0,.5);color:#ffe9a6;background:rgba(20,18,8,.7)}
.pa-btn:active{transform:scale(.97)}
.preview-actions.has-image .pa-btn-img{background:rgba(20,20,20,.85);border-color:rgba(255,255,255,.2)}

/* Botón "Ajustar" discreto a la derecha, cerca del "Editar" */
.pa-tools{
  position:absolute;right:10px;bottom:60px;z-index:8;
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 12px;border-radius:20px;border:1px solid var(--red);
  background:rgba(10,10,10,.72);color:#fff;font-family:inherit;
  font-size:11px;font-weight:900;letter-spacing:.4px;cursor:pointer;backdrop-filter:blur(6px);
}
.pa-tools:hover{background:rgba(227,6,19,.75)}

/* ---------- Herramientas visibles (Editar / Recortar / Ajustes) ---------- */
.tb-tabs{grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0 4px}
.tb-tab{min-width:0;padding:9px 4px;font-size:10px;border-radius:9px}
@media(max-width:800px){
  .tb-tabs{position:static;transform:none;width:100%;flex-direction:row;border:none;background:transparent;box-shadow:none;margin:6px 0}
  .tb-tab{width:auto;min-width:0;height:auto;padding:9px 4px;flex-direction:row;gap:5px}
  .tb-tab .emoji-tab{font-size:14px}
  .tb-tab .label-tab{font-size:9px;white-space:nowrap}
}
.text-editor-group .txt-input{font-size:15px}

/* ---------- Sel de Frente/Dorso ---------- */
.print-mode-wrap{margin-top:8px;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:.5px;margin-bottom:7px}
.print-mode-btn{flex:1;padding:11px 6px;font-size:12px;border-radius:9px}

/* Ranuras de subida ocultas (se sube desde la remera) */
.mode-upload-slots{display:none !important}

/* ---------- Acciones: Compartir AMARILLO y grande ---------- */
.acciones{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.acciones .mock-btn{width:100%;padding:15px;font-size:13px;border-radius:11px}
.cm-share-btn{
  background:linear-gradient(135deg,#FFD500,#e0a800) !important;
  color:#1a1a00 !important;border:none !important;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:13px !important;font-weight:900 !important;
  box-shadow:0 6px 18px rgba(255,213,0,.45);cursor:pointer;
}
.cm-share-btn .cm-share-icon{font-size:20px;line-height:1}
.cm-share-btn small{font-size:10px;font-weight:700;opacity:.8;letter-spacing:.3px}
.cm-share-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(255,213,0,.6)}

/* ---------- Avisos ---------- */
.mock-aviso{font-size:11.5px;line-height:1.5;padding:10px 12px;border-radius:10px}

/* ---------- Tamaño DESTACADO en Editar (agrandar/achicar) ---------- */
.tam-destacado{
  padding:12px 13px;border:1.5px solid var(--yellow);border-radius:11px;
  background:rgba(255,213,0,.06);margin:8px 0 10px;
}
.tam-destacado .tam-label{
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;font-weight:900;color:#fff;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;
}
.tam-destacado .tam-label b{color:var(--yellow);font-size:16px}
.tam-destacado input[type=range]{width:100%;accent-color:var(--yellow);height:26px;cursor:pointer}
.tam-destacado .tam-hint{font-size:9px;color:var(--gray);margin-top:4px;opacity:.85}

/* Ocultar la pestaña Recortar suelta (ya está dentro de Editar) */
#tab-crop{display:none !important}
.tb-tab[data-tab="crop"]{display:none !important}