/* ═══════════════════════════════════════════════════════════════
   Criminal Mambo — Pulido móvil V5.1
   Objetivo: que se vea la prenda (y no un botón gigante),
   sumar talles/descripción visibles y arreglar herramientas
   laterales del editor que quedaban cortadas en el celular.
   Este archivo se carga ÚLTIMO para pisar estilos anteriores.
   ═══════════════════════════════════════════════════════════════ */

/* ---------- 1) TARJETAS DE PRODUCTO: prenda protagonista ---------- */

/* Descripción corta y talles siempre visibles, discretos */
.producto-info .producto-desc{
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  color:var(--gray);font-size:11px;line-height:1.4;margin:2px 0 8px;letter-spacing:0;
}
.producto-info .producto-talles{
  font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:var(--gray);margin-bottom:10px;opacity:.72;
}
.producto-info .producto-talles::before{content:"📏 ";opacity:.85}

/* Quitar el botón gigante que tapaba la prenda en touch.
   La tarjeta entera es clickeable; dejamos solo un pill diminuto. */
@media (hover:none) and (pointer:coarse), (max-width:768px){
  .producto-quick{
    background:none;padding:10px;opacity:1;transform:none;
    display:flex;justify-content:flex-end;pointer-events:none;bottom:0;
  }
  .producto-quick button{
    pointer-events:auto;
    width:auto;min-width:0;padding:6px 11px;font-size:9.5px;letter-spacing:.5px;
    border-radius:20px;box-shadow:0 3px 10px rgba(0,0,0,.5);
  }
}

/* En list-view el pill tampoco debe ser enorme */
@media (max-width:768px){ .producto-quick button{width:auto} }

/* Ajustar altura del info para que no quede tan alto con desc+talles */
@media (max-width:400px){
  .producto-info .producto-desc{display:none}
  .producto-info .producto-talles{font-size:8.5px;margin-bottom:6px}
}

/* ---------- 2) HERO / HOME: título menos agresivo en celular ---------- */
@media (max-width:768px){
  .hero-title, .hero h1{font-size:clamp(26px,8.4vw,40px);line-height:1.05}
  .hero-cta, .hero .btn, .hero-buttons .btn{min-height:44px;padding:10px 16px;font-size:12px}
}

/* ---------- 3) EDITOR MOCKUP: herramienta lateral sin cortes ---------- */
/* Los tabs quedaban pisando el borde de la pantalla; los contenemos.
   Además la etiqueta "Recortar" se cortaba; permitimos que envuelva. */
@media (max-width:800px){
  .tb-tabs{
    right:6px;width:60px;padding:5px;gap:4px;
  }
  .tb-tab{
    width:50px;min-width:50px;height:auto;padding:6px 2px;gap:2px;
  }
  .tb-tab .emoji-tab{font-size:17px;line-height:1}
  .tb-tab .label-tab{
    font-size:7px;letter-spacing:.1px;line-height:1.05;
    white-space:normal;text-align:center;max-width:100%;
    word-break:break-word;overflow:visible;
  }
}

/* Hero del editor: título que no rompe en el celular */
@media (max-width:800px){
  .mock-hero{padding:18px 10px 8px}
  .mock-hero h1{font-size:clamp(19px,6.6vw,26px);letter-spacing:-.5px}
  .mock-hero .tag{font-size:11.5px;line-height:1.45}
}

/* El hint "Arrastrá la estampa..." no debe tapar la prenda:
   lo bajamos y lo hacemos chico. Además la vista previa crece. */
@media (max-width:800px){
  .preview-wrap{min-height:58svh}
  .preview-canvas{max-height:58svh}
  .gestos-hint{font-size:7.5px;line-height:1.25;padding:4px 5px}
}

/* ---------- 4) Beneficios: texto del header no cortado ---------- */
@media (max-width:768px){
  .topbar, .top-banner{white-space:normal;line-height:1.3;padding:5px 8px}
}

/* ---------- 5) UPLOAD A PRUEBA DE CELULARES ---------- */
/* El input real (transparente) cubre toda la ranura: al tocar la ranura
   se abre el selector nativo de fotos SIEMPRE, en iPhone y Android.
   (Antes se usaba .click() sobre un input con display:none, que iOS/Android
   bloquean y por eso "no pasaba nada".) */
.mode-upload-slot{position:relative;overflow:hidden;cursor:pointer}
.mode-upload-slot .slot-file-input{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;
  cursor:pointer;z-index:5;font-size:0;border:0;padding:0;margin:0;
}

/* ---------- 6) Fondo fijo de marca ---------- */
.fondo-fijo-info{
  margin:14px 0 4px;padding:9px 11px;border:1px solid var(--border-2);
  border-radius:9px;background:var(--bg-3);color:var(--gray);
  font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:800;
}
.fondo-fijo-info b{color:var(--yellow);font-weight:900}
.fondo-fijo-info::before{content:"🖼️ "}

/* Botón compartir más visible como secundario */
#btnCompartir{display:inline-flex;align-items:center;gap:6px}