*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:0;background:#f6f7f9;color:#111}
.container{max-width:1100px;margin:24px auto;padding:0 16px}
h1{margin:0 0 16px}
.card{background:#fff;border:1px solid #e6e8ee;border-radius:12px;padding:16px;margin:12px 0;box-shadow:0 1px 8px rgba(0,0,0,.04)}
.row{display:flex;gap:12px;flex-wrap:wrap}
.field{flex:1;min-width:220px;display:flex;flex-direction:column;gap:6px;margin:8px 0}
label{font-size:13px;color:#333}
.hint{font-size:12px;opacity:.8;line-height:1.3}
input,select,button{font-size:14px;padding:10px;border-radius:10px;border:1px solid #d7dbe6}
button{cursor:pointer}
button.primary{background:#111;color:#fff;border-color:#111}
button.primary:disabled{opacity:.5;cursor:not-allowed}
button.ghost{background:transparent}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.item{background:#fff;border:1px solid #e6e8ee;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px}
.thumb{width:100%;height:180px;background:#f0f2f7;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.thumb img{max-width:100%;max-height:100%;display:block}
.item .meta{display:grid;grid-template-columns:1fr 92px;gap:8px}
.item .meta > *{flex:1}
.small{font-size:12px;color:#555}
.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.progressWrap{flex:1;min-width:240px;height:12px;background:#eef1f7;border-radius:999px;overflow:hidden;border:1px solid #dde2ef}
.progressBar{height:100%;width:0%;background:#111}
.progressText{min-width:120px}
.status{margin-top:8px;font-size:14px}
.sizesInfo{font-size:13px;color:#333;line-height:1.4}
.badge{display:inline-block;padding:2px 8px;border:1px solid #ddd;border-radius:999px;font-size:12px;margin-right:6px;background:#fafafa}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.modal.hidden{display:none}
.modalContent{background:#fff;border-radius:14px;max-width:980px;width:100%;border:1px solid #e6e8ee;overflow:hidden}
.modalHeader{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #eee}
.modalBody{display:flex;gap:12px;padding:12px;flex-wrap:wrap}
.modalLeft{flex:2;min-width:300px;max-height:70vh}
.modalLeft img{max-width:100%}
.modalRight{flex:1;min-width:260px;display:flex;flex-direction:column;gap:10px}
.help{background:#f6f7f9;border:1px solid #e6e8ee;border-radius:12px;padding:10px;font-size:13px}


/* Ajustes de inputs dentro de la tarjeta */
.item .meta select{min-width:110px}
.item .meta input[type=number]{width:92px;min-width:92px;padding:10px 8px}

.totalsRow{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-bottom:10px}
.totalsLabel{font-size:14px;color:#333}
.totalsValue{font-size:16px;font-weight:700}


/* Fix: select + cantidad no deben salirse y deben mostrar spinners */
.item .meta select{min-width:0;width:100%}
.item .meta input[type=number]{width:92px;min-width:92px;max-width:92px;padding:10px 8px}


/* Cropper necesita que el modal exista en layout (no display:none) */
#cropModal{display:flex}
#cropModal.hidden{display:flex;visibility:hidden;opacity:0;pointer-events:none}


/* =========================================================
   Modal recorte: FIX definitivo para móvil (footer fijo)
   - El scroll va en .modalBody
   - Los botones deben ir dentro de .cropModalFooterFixed
   ========================================================= */

/* El overlay debe poder empezar arriba y permitir scroll si el teclado aparece */
.modal{
  align-items:flex-start;
  overflow:auto;
}

/* Contenedor del modal con altura máxima */
.modalContent{
  display:flex;
  flex-direction:column;
  max-height:92vh;
  overflow:hidden; /* el scroll va en modalBody */
}

/* El cuerpo del modal scrollea y deja espacio al footer fijo */
.modalBody{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:110px; /* espacio para footer fijo */
}

/* Footer fijo (solo si existe un bloque con esta clase) */
.cropModalFooterFixed{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width:min(980px, calc(100vw - 16px));
  z-index:9999;

  background:#fff;
  border-top:1px solid #eaeaea;
  box-shadow:0 -8px 24px rgba(0,0,0,.10);
  padding:12px 12px calc(12px + env(safe-area-inset-bottom));
  border-radius:12px 12px 0 0;
}

/* Móvil: apilar y limitar altura de la vista de la foto */
@media (max-width: 640px){
  .modalBody{
    flex-direction:column;
  }

  .modalLeft{
    min-width:0;
    max-height:55vh;
  }

  /* Por si el panel derecho es muy largo */
  .modalRight{
    min-width:0;
  }

  /* Un poco más de hueco al footer fijo en móvil */
  .modalBody{
    padding-bottom:130px;
  }
}

/* iOS moderno: si tu navegador soporta dvh, mejor ajuste */
@supports (height: 100dvh){
  .modalContent{
    max-height:92dvh;
  }
}