/* ============================================================
   Diseñador de Bufandas — estilos con ámbito #dbuf-app.
   Cambia las variables para adaptar los colores a tu marca.
   ============================================================ */
#dbuf-app{
  /* Paleta de La Chika de las Bufandas:
     naranja #EB7025 (primario), azul del logo #1830c0,
     rosa #FFD8D4 (secundario), tinta #222, texto #666, fondo blanco */
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#fff6f1;
  --ink:#222222;
  --muted:#666666;
  --accent:#EB7025;
  --accent-ink:#ffffff;
  --accent-2:#1830c0;
  --soft:#FFD8D4;
  --border:#e9e4e1;
  --shadow:0 8px 30px rgba(34,34,34,.08);
  --radius:14px;
  --font:inherit; /* hereda la tipografía del tema del sitio */
  --serif:inherit;
  font-family:var(--font);color:var(--ink);line-height:1.5;
  max-width:900px;margin:0 auto; /* compacto y centrado en la página */
}
#dbuf-app *{box-sizing:border-box}
#dbuf-app .steps{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
#dbuf-app .step{flex:1;min-width:120px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center;transition:.2s}
#dbuf-app .step .n{width:22px;height:22px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:bold;flex:0 0 auto}
#dbuf-app .step.active{border-color:var(--accent);color:var(--ink);box-shadow:var(--shadow)}
#dbuf-app .step.active .n{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
#dbuf-app .step.done .n{background:var(--accent-2);color:#fff;border-color:var(--accent-2)}
#dbuf-app .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);margin-bottom:20px}
#dbuf-app .card h2{font-family:var(--serif);font-size:19px;margin:0 0 4px}
#dbuf-app .card .sub{color:var(--muted);font-size:14px;margin:0 0 18px}
#dbuf-app .hidden{display:none !important}
#dbuf-app label.fld{display:block;font-size:13px;font-weight:600;margin:14px 0 6px}
#dbuf-app select,#dbuf-app input[type=text],#dbuf-app input[type=number]{font-family:var(--font);font-size:14px;padding:9px 11px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--ink);width:100%;max-width:100%}
#dbuf-app input[type=range]{accent-color:var(--accent)}
#dbuf-app .btn{font-family:var(--font);font-size:14px;font-weight:600;padding:11px 20px;border-radius:10px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer;transition:.15s;text-transform:none;line-height:1.3}
#dbuf-app .btn:hover{filter:brightness(1.06);background:var(--accent);color:var(--accent-ink)}
#dbuf-app .btn:disabled{opacity:.45;cursor:not-allowed}
#dbuf-app .btn.ghost{background:transparent;color:var(--accent)}
#dbuf-app .btn.mini{padding:6px 12px;font-size:12.5px}
#dbuf-app .actions{display:flex;gap:10px;justify-content:space-between;margin-top:22px;flex-wrap:wrap}
#dbuf-app .drop{border:2px dashed var(--border);border-radius:12px;padding:38px 20px;text-align:center;color:var(--muted);cursor:pointer;background:var(--surface-2);transition:.15s}
#dbuf-app .drop:hover{border-color:var(--accent);color:var(--ink)}
#dbuf-app .drop strong{color:var(--accent)}
#dbuf-app .thumb-wrap{display:flex;gap:16px;align-items:center;margin-top:14px}
#dbuf-app .thumb-wrap canvas{border:1px solid var(--border);border-radius:6px;background:var(--surface-2)}
#dbuf-app .dims{font-size:12px;color:var(--muted);margin-top:4px}
#dbuf-app .price-line{font-size:16px;font-weight:600;margin-top:14px;color:var(--ink)}
#dbuf-app .price-teaser{font-size:13px;margin-top:14px;padding:10px 12px;border-radius:9px;background:var(--surface-2);border:1px dashed var(--border);color:var(--muted)}
#dbuf-app .qty-row{display:flex;gap:8px;align-items:center}
#dbuf-app .qty-row input[type=number]{width:80px;text-align:center}
#dbuf-app .discount-info{font-size:13px;margin-top:10px;padding:8px 12px;border-radius:9px;display:none}
#dbuf-app .discount-info.active{display:block;background:var(--soft);border:1px solid var(--accent);color:#222;font-weight:600}
#dbuf-app .discount-info.hint{display:block;background:var(--surface-2);border:1px dashed var(--border);color:var(--muted)}
#dbuf-app .price-line .woocommerce-Price-amount{color:var(--accent)}
/* ---- Modal de recorte ---- */
#dbuf-app .modal{position:fixed;inset:0;background:rgba(30,20,14,.72);display:flex;align-items:center;justify-content:center;z-index:99999;padding:18px}
#dbuf-app .modal-box{background:var(--surface);border-radius:16px;width:min(960px,96vw);height:min(88vh,900px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4)}
#dbuf-app .modal-head{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
#dbuf-app .modal-head h3{font-family:var(--serif);margin:0;font-size:18px}
#dbuf-app .modal-head .mut{color:var(--muted)}
#dbuf-app .modal-head .x{margin-left:auto;cursor:pointer;font-size:22px;color:var(--muted);background:none;border:none;padding:0 4px}
#dbuf-app .crop-area{flex:1;position:relative;background:#1a1a1a;overflow:hidden}
#dbuf-cropCanvas{position:absolute;inset:0;touch-action:none;cursor:move}
#dbuf-app .modal-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#dbuf-app .modal-foot .info{font-size:12.5px;color:var(--muted);margin-right:auto}
/* ---- Resultado ---- */
#dbuf-app .result-stage{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}
#dbuf-app .preview-col{flex:2;min-width:300px}
#dbuf-app .assign-col{flex:1;min-width:280px;max-width:100%}
#dbuf-app .preview-tools{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
#dbuf-app .preview-tools label{font-size:13px;display:flex;align-items:center;gap:6px;color:var(--muted)}
#dbuf-app .preview-tools input[type=range]{width:150px}
#dbuf-app .preview-box{background:#f6f2f0;border:1px solid var(--border);border-radius:10px;padding:16px;max-height:680px;overflow:auto;text-align:center}
#dbuf-patternCanvas{image-rendering:pixelated;box-shadow:0 6px 20px rgba(0,0,0,.18);border-radius:2px}
#dbuf-patternCanvas.painting{cursor:none;touch-action:none} /* el anillo reemplaza al cursor */
#dbuf-patternCanvas.bucket{cursor:crosshair;touch-action:none}
#dbuf-brushRing{position:fixed;display:none;pointer-events:none;z-index:99998;border:2px solid #EB7025;box-shadow:0 0 0 1px rgba(255,255,255,.85),inset 0 0 0 1px rgba(255,255,255,.85);transform:translate(-50%,-50%)}
#dbuf-app .count-pills{display:flex;gap:8px;margin:6px 0 4px}
#dbuf-app .pill{flex:1;text-align:center;padding:12px;border:1px solid var(--border);border-radius:10px;cursor:pointer;font-weight:600;background:var(--surface)}
#dbuf-app .pill.on{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
#dbuf-app .thread-list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
#dbuf-app .thread-row{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:8px 10px}
#dbuf-app .sw{width:30px;height:30px;border-radius:6px;border:1px solid rgba(0,0,0,.15);flex:0 0 auto}
#dbuf-app .thread-row select{flex:1;width:auto;min-width:0} /* min-width:0 evita que el select desborde el contenedor flex */
#dbuf-app .warnbox{background:#fff1e7;border:1px solid var(--accent);color:#8a4a1c;border-radius:9px;padding:10px 12px;font-size:13px;margin-top:14px}
#dbuf-app .note{font-size:12px;color:var(--muted);font-style:italic;margin-top:10px}
/* ---- Herramienta de retoque ---- */
#dbuf-app .paint-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
#dbuf-app .psw{width:28px;height:28px;border-radius:7px;border:2px solid rgba(0,0,0,.15);cursor:pointer;flex:0 0 auto;transition:.12s}
#dbuf-app .psw.on{border-color:var(--ink);transform:scale(1.15);box-shadow:0 2px 8px rgba(0,0,0,.25)}
#dbuf-app .btn.toggled{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
/* ---- Switch de tejido ---- */
#dbuf-app .switch{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--muted)}
#dbuf-app .switch input{position:absolute;opacity:0}
#dbuf-app .switch .track{width:38px;height:21px;border-radius:12px;background:#d8cdc0;transition:.2s;position:relative;flex:0 0 auto}
#dbuf-app .switch .track::after{content:"";position:absolute;top:2.5px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
#dbuf-app .switch input:checked+.track{background:var(--accent-2)}
#dbuf-app .switch input:checked+.track::after{left:19px}
#dbuf-app .spin{display:inline-block;width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:dbuf-sp .7s linear infinite;vertical-align:-3px}
@keyframes dbuf-sp{to{transform:rotate(360deg)}}