/* CholloPrinting DTF Lab UX - 2026-10-18
   PRESENTATION ONLY. Scoped to the existing #cpdtf-app compositor.
   No modifications to packing, PDF generation, pricing or cart. */
#cpdtf-app{--pink:#ed087b;--pink2:#ca075f;--ink:#15213a;--muted:#596579;--line:#e0e6f0;--soft:#fff0f8;--paper:#f5f7fb;max-width:1536px;padding-top:22px}
#cpdtf-app button,#cpdtf-app input{touch-action:manipulation}
#cpdtf-app button:focus-visible,#cpdtf-app a:focus-visible,#cpdtf-app input:focus-visible,#cpdtf-app summary:focus-visible{outline:3px solid #00a9da;outline-offset:2px}
#cpdtf-app .cpdtf-hero{padding:30px clamp(18px,3vw,38px);border-radius:22px;background:radial-gradient(ellipse at 90% 10%,#244060,transparent 48%),linear-gradient(115deg,#091528,#0d2440);box-shadow:0 14px 38px #0a20411f;margin-bottom:20px;overflow:hidden}
#cpdtf-app .cpdtf-hero>div:first-child{max-width:100%}
#cpdtf-app .cpdtf-badge{background:#f5168640;color:#ffd5e8;border:1px solid #fc90c14a;padding:7px 12px}
#cpdtf-app h1{max-width:1020px;font-size:clamp(29px,3.2vw,47px);letter-spacing:-.038em;color:white;margin:12px 0}
#cpdtf-app .cpdtf-hero p{color:#e2edf8;max-width:980px;font-size:clamp(14px,1.3vw,17px);line-height:1.58}
#cpdtf-app .cpdtf-price-lead{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:20px}
#cpdtf-app .cpdtf-price-lead strong{color:#fff;font-size:clamp(23px,3vw,34px)}
#cpdtf-app .cpdtf-price-lead span{color:#dce7f3;line-height:1.5}
#cpdtf-app .cpdtf-hero-guide{display:inline-flex;align-items:center;min-height:42px;gap:7px;margin-top:15px;padding:8px 14px;border:1px solid #9dd5ee71;border-radius:10px;color:#e9faff;text-decoration:none;font-size:13px;font-weight:750}
#cpdtf-app .cpdtf-hero-guide:hover{background:#ffffff18;color:#fff}
#cpdtf-app .cpdtf-hero-points{display:flex;gap:9px 14px;flex-wrap:wrap;margin-top:15px}
#cpdtf-app .cpdtf-hero-points span{font-size:12px;font-weight:650;color:#c7ebff;border:1px solid #92dfff42;background:#ffffff0b;padding:5px 9px;border-radius:999px}
#cpdtf-app .cpdtf-modebar{gap:14px;margin-bottom:18px}
#cpdtf-app .cpdtf-modebtn{padding:17px 19px;min-height:100px;border:1px solid #dee5ee;border-radius:17px;background:#fff;box-shadow:0 5px 15px #0e274210;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
#cpdtf-app .cpdtf-modebtn strong{font-size:16px;color:#14233c}
#cpdtf-app .cpdtf-modebtn span{font-size:13px;line-height:1.4}
#cpdtf-app .cpdtf-modebtn:hover{transform:translateY(-2px);box-shadow:0 8px 23px #0e27421c}
#cpdtf-app .cpdtf-modebtn.is-active{background:linear-gradient(145deg,#fff4fa,#fff);border-color:#ed78b3;box-shadow:0 0 0 2px #ed087b12}
#cpdtf-app .cpdtf-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:16px;align-items:start}
#cpdtf-app .cpdtf-grid>.cpdtf-card{background:#fff;border:1px solid #e0e7f0;border-radius:20px;box-shadow:0 7px 28px #12304d0e;padding:clamp(14px,1.7vw,23px);min-width:0}
#cpdtf-app .cpdtf-card:nth-child(2){background:linear-gradient(180deg,#fafdff,#fff 230px);border-color:#cdddec}
#cpdtf-app .cpdtf-step{background:#f30879;box-shadow:0 4px 8px #ed087b26}
#cpdtf-app .cpdtf-head{margin-bottom:14px}
#cpdtf-app .cpdtf-head h2{font-size:clamp(18px,1.6vw,23px);color:#13243e}
#cpdtf-app .cpdtf-live{background:#eaf9f6;color:#21745d;border:1px solid #c6ebe0}
#cpdtf-app .cpdtf-drop{background:linear-gradient(145deg,#f5fbff,#fff7fc);border:2px dashed #adc7d9;border-radius:16px;min-height:152px}
#cpdtf-app .cpdtf-drop:hover,#cpdtf-app .cpdtf-drop.drag{border-color:#ed087b;background:#fff0f8}
#cpdtf-app .cpdtf-drop span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;color:#f30879;background:#ffe5f2;font-size:25px}
#cpdtf-app .cpdtf-drop b{font-size:16px;color:#1a2a43}
#cpdtf-app .cpdtf-file{border:1px solid #e5eaf3;background:#fcfdff;border-radius:13px}
#cpdtf-app .cpdtf-file:focus-within{border-color:#85cfe2}
#cpdtf-app .cpdtf-thumb{background:linear-gradient(145deg,#f1f5fa,#fff7fb)}
#cpdtf-app .cpdtf-price-card{background:linear-gradient(120deg,#f5faff,#fff4fa);border-color:#dce7f6;border-radius:16px}
#cpdtf-app .cpdtf-total-block strong{font-size:clamp(25px,2.7vw,36px);color:#13223d}
#cpdtf-app .cpdtf-preview-tools{display:grid;grid-template-columns:1fr;gap:12px;padding:13px;margin:14px 0;background:#f8fafc;border:1px solid #e6eaf2;border-radius:14px}
#cpdtf-app .cpdtf-preview-tool-group>small{display:block;color:#37465f;margin:0 0 7px;font-weight:800;font-size:12px}
#cpdtf-app .cpdtf-bg-switch,#cpdtf-app .cpdtf-view-switch{display:flex;flex-wrap:wrap;gap:5px}
#cpdtf-app .cpdtf-bg-switch button,#cpdtf-app .cpdtf-view-switch button{flex:1 1 auto;min-height:40px;border:1px solid #e2e7ee;background:#fff;color:#3c4e62;border-radius:9px;padding:8px 10px;font-size:12px;white-space:normal}
#cpdtf-app .cpdtf-bg-switch button.is-active,#cpdtf-app .cpdtf-view-switch button.is-active{background:#0a243d;color:#fff;border-color:#0a243d}
#cpdtf-app .cpdtf-color-controls{display:flex;align-items:flex-start;flex-wrap:wrap;gap:10px 12px;margin-top:12px}
#cpdtf-app .cpdtf-color-controls h3{font-size:12px;font-weight:850;line-height:1.4;color:#26364f;width:100%;margin:0}
#cpdtf-app .cpdtf-color-swatches{display:flex;flex:1 1 250px;flex-wrap:wrap;gap:8px}
#cpdtf-app .cpdtf-color-swatch{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;min-width:44px;min-height:44px;border:2px solid #fff;border-radius:50%;background:var(--cpdtf-swatch);box-shadow:0 0 0 1px #b9c7d4,0 2px 4px #05234316;cursor:pointer}
#cpdtf-app .cpdtf-color-swatch:hover{transform:scale(1.055)}
#cpdtf-app .cpdtf-color-swatch.is-active{box-shadow:0 0 0 3px #f00781,0 4px 9px #f0078142}
#cpdtf-app .cpdtf-color-swatch.is-active::after{content:"✓";font-size:16px;font-weight:900;color:#fff;text-shadow:0 1px 3px #0009}
#cpdtf-app .cpdtf-color-swatch[style*="#ffffff"].is-active::after,#cpdtf-app .cpdtf-color-swatch[style*="#f5d6b2"].is-active::after,#cpdtf-app .cpdtf-color-swatch[style*="#f0a8bf"].is-active::after{color:#1a2a3b;text-shadow:none}
#cpdtf-app .cpdtf-custom-color-label{display:flex;align-items:center;gap:9px;flex:0 0 auto;padding:4px 8px;background:#fff;border:1px solid #d5deec;border-radius:10px;font-size:12px;font-weight:750;line-height:1.2;color:#26374d;min-height:44px}
#cpdtf-app #cpdtf-color-picker{width:42px;height:34px;padding:2px;border:0;border-radius:7px;background:transparent;cursor:pointer}
#cpdtf-app .cpdtf-color-note{width:100%;font-size:11px;line-height:1.5;color:#5a6476;margin:0}
#cpdtf-app .cpdtf-color-note strong{color:#1e334b}
#cpdtf-app .cpdtf-preview-wrap{background:#e9f0f6;border:1px solid #d4e0ec;border-radius:15px;padding:12px;box-shadow:inset 0 2px 10px #0d2f4715}
#cpdtf-app .cpdtf-preview-metrics{color:#263a54}
#cpdtf-app .cpdtf-preview-note{color:#5d6b7b;font-size:12px}
#cpdtf-app .cpdtf-buybar{background:linear-gradient(120deg,#fff5fa,#f8fbff);border:1px solid #f1bfda;border-radius:14px}
#cpdtf-app .cpdtf-btn-primary{background:#ed087b;border-radius:10px;min-height:44px;color:#fff}
#cpdtf-app .cpdtf-btn-primary:hover{background:#c40763}
#cpdtf-app .cpdtf-order-summary{font-size:12px;color:#637183}
@media(max-width:1050px){#cpdtf-app .cpdtf-grid{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}#cpdtf-app .cpdtf-modebtn{min-height:87px;padding:14px}}
@media(max-width:980px){#cpdtf-app .cpdtf-grid{grid-template-columns:1fr}#cpdtf-app .cpdtf-hero{padding:23px}#cpdtf-app .cpdtf-preview-wrap{max-height:510px}}
@media(max-width:650px){#cpdtf-app{padding:12px 12px 62px}#cpdtf-app .cpdtf-hero{border-radius:17px;padding:20px 17px;margin-bottom:14px}#cpdtf-app h1{font-size:30px;line-height:1.12}#cpdtf-app .cpdtf-hero p{font-size:14px}#cpdtf-app .cpdtf-price-lead{margin-top:14px}#cpdtf-app .cpdtf-price-lead strong{font-size:26px}#cpdtf-app .cpdtf-hero-guide{min-height:40px}#cpdtf-app .cpdtf-modebar{grid-template-columns:1fr;gap:8px}#cpdtf-app .cpdtf-modebtn{min-height:72px;padding:12px 14px}#cpdtf-app .cpdtf-modebtn strong{font-size:14px}#cpdtf-app .cpdtf-modebtn span{font-size:12px}#cpdtf-app .cpdtf-grid>.cpdtf-card{padding:13px;border-radius:15px}#cpdtf-app .cpdtf-color-controls{margin-top:12px;gap:8px}#cpdtf-app .cpdtf-color-swatches{gap:7px}#cpdtf-app .cpdtf-color-swatch{width:44px;height:44px}#cpdtf-app .cpdtf-custom-color-label{width:100%;justify-content:space-between}#cpdtf-app #cpdtf-color-picker{width:64px}#cpdtf-app .cpdtf-preview-tools{margin:10px 0;padding:10px}#cpdtf-app .cpdtf-price-card{gap:10px}#cpdtf-app .cpdtf-preview-wrap{max-height:410px}#cpdtf-app .cpdtf-buybar{padding:11px}#cpdtf-app .cpdtf-buybar .cpdtf-btn-primary{min-width:146px}}
@media(prefers-reduced-motion:reduce){#cpdtf-app .cpdtf-modebtn{transition:none}#cpdtf-app .cpdtf-modebtn:hover,#cpdtf-app .cpdtf-color-swatch:hover{transform:none}}
/* CholloDTF · ficha de diseño V2 · 2026-10-18.
   Corrección de diseño exclusivamente: NO cambia distribución, tamaño real, precio ni PDF. */
#cpdtf-app .cpdtf-file {
  grid-template-columns:70px minmax(0,1fr);
  align-items:start;
  gap:11px 14px;
  padding:14px;
  min-width:0;
  overflow-wrap:anywhere;
}
#cpdtf-app .cpdtf-file .cpdtf-main {display:contents;}
#cpdtf-app .cpdtf-file .cpdtf-thumb {
  grid-column:1;grid-row:1;
  width:70px;height:70px;
  border:1px solid #e1e8f2;
  border-radius:12px;
}
#cpdtf-app .cpdtf-file .cpdtf-title-row {
  grid-column:2;grid-row:1;
  align-self:center;
  min-width:0;
}
#cpdtf-app .cpdtf-file .cpdtf-title {
  min-width:0;max-width:100%;
  margin:0;
  font-size:14px;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#162943;
}
#cpdtf-app .cpdtf-file .cpdtf-title small {
  display:block;margin-top:5px;
  color:#62748a;font-size:11px;font-weight:550;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#cpdtf-app .cpdtf-file .cpdtf-controls {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  min-width:0;
  gap:10px;
}
#cpdtf-app .cpdtf-file .cpdtf-field {
  min-width:0;
  padding:10px;
  background:#f6f9fd;
  border:1px solid #e4eaf3;
  border-radius:12px;
}
#cpdtf-app .cpdtf-file .cpdtf-field label {
  margin:0 0 7px;
  color:#445571;font-size:11px;
  font-weight:850;text-transform:none;letter-spacing:0;
}
#cpdtf-app .cpdtf-file .cpdtf-field-unit {font-size:11px;color:#65748b;}
#cpdtf-app .cpdtf-file .cpdtf-stepper {
  grid-template-columns:42px minmax(0,1fr) 42px;
  height:46px;
  min-width:0;
  border-color:#d8e0ed;
  border-radius:10px;
}
#cpdtf-app .cpdtf-file .cpdtf-stepper button {
  min-width:0;min-height:44px;
  padding:0;
  font-size:21px;
  color:#172b49;
}
#cpdtf-app .cpdtf-file .cpdtf-stepper input {
  width:100%;min-width:0;
  padding:0 2px;
  height:44px;font-size:15px;
  color:#14243d;
}
#cpdtf-app .cpdtf-file .cpdtf-field-qty {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(152px,205px);
  gap:10px;
  align-items:center;
  background:#fff;
}
#cpdtf-app .cpdtf-file .cpdtf-field-qty label {margin:0;}
#cpdtf-app .cpdtf-file .cpdtf-field-qty .cpdtf-stepper {width:100%;}
#cpdtf-app .cpdtf-file .cpdtf-field-qty .cpdtf-quickqty {grid-column:1/-1;justify-content:flex-end;gap:8px;margin:2px 0 0;}
#cpdtf-app .cpdtf-file .cpdtf-field-qty .cpdtf-quickqty button {min-height:36px;padding:4px 12px;font-size:11px;}
#cpdtf-app .cpdtf-file :is(.cpdtf-mobile-summary,.cpdtf-ratio-note,.cpdtf-options,.cpdtf-checks,.cpdtf-trim-help,.cpdtf-quality-help,.cpdtf-extra-hint,.cpdtf-error) {
  grid-column:1/-1;
  min-width:0;
}
#cpdtf-app .cpdtf-file .cpdtf-ratio-note {
  display:flex;align-items:center;
  margin:0;
  padding:4px 0;
  font-size:11px;
  line-height:1.45;
}
#cpdtf-app .cpdtf-file .cpdtf-file-actions {
  grid-column:1/-1;
  justify-content:flex-end;
  display:flex;
  gap:9px;
  padding-top:10px;
  margin-top:0;
  border-top:1px solid #e5ebf4;
}
#cpdtf-app .cpdtf-file .cpdtf-file-action {
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:92px;
  padding:0 12px;
  background:#fff;
  color:#34465f;
  border:1px solid #dfe7f2;
  border-radius:10px;
  font-size:12px;
  font-weight:750;
}
#cpdtf-app .cpdtf-file .cpdtf-file-action:hover {background:#f3f8fd;border-color:#aac8e2;}
#cpdtf-app .cpdtf-file .cpdtf-file-action.cpdtf-remove {color:#ab315b;}
#cpdtf-app .cpdtf-file .cpdtf-file-action.cpdtf-remove:hover {background:#fff2f6;border-color:#f1bacd;}
#cpdtf-app .cpdtf-file .cpdtf-action-label {display:inline;}
@media(max-width:650px){
  #cpdtf-app .cpdtf-file{grid-template-columns:60px minmax(0,1fr);gap:10px 12px;padding:11px;}
  #cpdtf-app .cpdtf-file .cpdtf-thumb{width:60px;height:60px;}
  #cpdtf-app .cpdtf-file .cpdtf-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  #cpdtf-app .cpdtf-file .cpdtf-field{padding:8px;}
  #cpdtf-app .cpdtf-file .cpdtf-stepper{grid-template-columns:38px minmax(0,1fr) 38px;height:46px;}
  #cpdtf-app .cpdtf-file .cpdtf-stepper button{min-height:44px;}
  #cpdtf-app .cpdtf-file .cpdtf-title{font-size:13px;}
  #cpdtf-app .cpdtf-file .cpdtf-field-qty{grid-template-columns:minmax(0,1fr) minmax(128px,165px);}
  #cpdtf-app .cpdtf-file .cpdtf-file-action{min-height:44px;}
  #cpdtf-app .cpdtf-file.is-collapsed .cpdtf-thumb{grid-row:1 / span 2;}
  #cpdtf-app .cpdtf-file.is-collapsed .cpdtf-mobile-summary{grid-column:2;grid-row:2;margin-top:-6px;}
}
@media(max-width:380px){
  #cpdtf-app .cpdtf-file .cpdtf-field-qty{grid-template-columns:minmax(0,1fr) 134px;}
  #cpdtf-app .cpdtf-file .cpdtf-field-qty .cpdtf-stepper{grid-template-columns:38px minmax(0,1fr) 38px;}
  #cpdtf-app .cpdtf-file .cpdtf-stepper input{font-size:14px;}
}
@media(prefers-reduced-motion:reduce){#cpdtf-app .cpdtf-file .cpdtf-file-action{transition:none;}}