*{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}
/* === Revelado24 Woo: footer fijo en modal de recorte (móvil) === */
.cropModalFooterFixed{
  padding: 12px 14px;
  border-top: 1px solid #eee;
  background: #fff;
}

/* En móvil: overlay scroll + contenido con footer siempre visible */
@media (max-width: 640px){
  .modal{ align-items: flex-start; overflow: auto; }
  .modalContent{ max-height: 92vh; display:flex; flex-direction:column; }
  .modalBody{ overflow:auto; -webkit-overflow-scrolling: touch; }
  .modalRight{ position: static; }
  .cropModalFooterFixed{ position: sticky; bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* Wrapper del shortcode */
.r24u .container{ max-width: 1100px; margin: 0 auto; padding: 0; }