/* =========================================================
   Dicrear · Separar colores para serigrafía (separar-colores.php)
   Inicio (subir imagen) con la base de las herramientas y, al subir, el editor de separación.
   ========================================================= */
.sc [hidden],.sc-editor [hidden]{display:none!important}
.sc .z-vacio{--t:#0b7fab;--tf:#e7f9fd}
.sc .z-vacio{min-height:360px}
.sc-funciones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin:1.2rem 0 2rem}
.sc-funciones>div{background:#fff;border:1px solid var(--ms-borde,#e6e8ec);border-radius:12px;padding:1rem;display:flex;flex-direction:column;gap:.2rem}
.sc-funciones i{font-size:1.5rem;color:#0b7fab;margin-bottom:.2rem}
.sc-funciones b{font-size:.92rem;color:#1f2a37}
.sc-funciones span{font-size:.8rem;color:#6b7280;line-height:1.4}
@media(max-width:991px){.sc-funciones{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== Editor ===== */
body.sc-con-imagen #scInicio{display:none}
.sc-editor{--b:#e6e8ec;--t:#1f2a37;--g:#6b7280;--a:#0b7fab;background:#f5f6f8;color:var(--t);font-size:13px;display:flex;flex-direction:column;height:calc(100vh - 150px);min-height:640px;border-top:1px solid var(--b)}
.sc-editor button{font-family:inherit}

.sc-barra{background:#fff;border-bottom:1px solid var(--b);padding:8px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sc-volver{display:flex;align-items:center;gap:6px;border:0;background:none;font-weight:700;color:var(--t);min-height:38px;padding:0 6px;border-radius:8px}
.sc-volver:hover{background:#f1f3f5}
.sc-sep{width:1px;height:24px;background:var(--b)}
.sc-archivo{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.sc-archivo b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.sc-archivo span{color:var(--g);font-size:12px}
.sc-grupo{display:flex;gap:4px}
.sc-ib{width:38px;height:38px;border:1px solid var(--b);background:#fff;border-radius:9px;display:grid;place-items:center;color:var(--t);padding:0}
.sc-ib:disabled{opacity:.4}
.sc-tabs{display:flex;background:#f1f3f5;border-radius:9px;padding:3px;gap:2px}
.sc-tabs button{border:0;background:transparent;border-radius:7px;padding:6px 10px;font-size:12.5px;font-weight:600;color:var(--g)}
.sc-tabs button.on{background:#fff;color:var(--t);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.sc-vistas{margin-left:auto}
.sc-zoom{display:flex;align-items:center;gap:2px;border:1px solid var(--b);border-radius:9px;padding:2px;background:#fff}
.sc-zoom button{width:32px;height:32px;border:0;background:none;border-radius:7px;font-size:17px;color:var(--t);display:grid;place-items:center;padding:0}
.sc-zoom button:hover{background:#f1f3f5}
.sc-zoom b{min-width:48px;text-align:center;font-size:12.5px}
.sc-descargar{display:flex;align-items:center;gap:8px;background:var(--t);color:#fff;border:0;border-radius:9px;font-weight:700;padding:0 16px;min-height:40px}
.sc-descargar:hover{background:#0f1720}

.sc-opciones{background:#fff;border-bottom:1px solid var(--b);padding:6px 14px 6px 76px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-height:44px;font-size:12.5px;color:var(--g)}
.sc-opciones>b{color:var(--t)}
.sc-opciones b{color:var(--t)}
.sc-opciones label{display:flex;align-items:center;gap:8px;margin:0;color:#374151;font-weight:600}
.sc-opciones input[type=range]{width:120px;accent-color:var(--t)}
.sc-opciones output{font-weight:700;background:#f1f3f5;border-radius:6px;padding:1px 8px;color:var(--t);min-width:46px;text-align:center}
.sc-opciones select{border:1px solid var(--b);border-radius:7px;padding:4px 8px;font-size:12.5px;max-width:190px;background:#fff}
.sc-chk input{width:16px;height:16px;accent-color:var(--a)}

.sc-cuerpo{flex:1;display:flex;min-height:0}
.sc-herrs{width:62px;flex:none;background:#fff;border-right:1px solid var(--b);padding:8px 0;display:flex;flex-direction:column;align-items:center;gap:4px;overflow-y:auto}
.sc-herrs button{width:48px;min-height:48px;border:1.5px solid transparent;background:transparent;border-radius:10px;color:#374151;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:4px 0}
.sc-herrs button span{font-size:9.5px;font-weight:600}
.sc-herrs button:hover{background:#f1f3f5}
.sc-herrs button.on{background:var(--t);border-color:var(--t);color:#fff}
#scSolo.on{background:#e7f9fd;border-color:#b9ecf8;color:var(--a)}
.sc-herrs-sep{width:32px;height:1px;background:var(--b);margin:4px 0}

.sc-centro{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;padding:12px}
.sc-caja{flex:1;min-height:300px;position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--b);background:repeating-conic-gradient(#eef0f3 0 25%,#fff 0 50%) 0 0/20px 20px;touch-action:none;user-select:none}
.sc-caja canvas#scLienzo,.sc-caja canvas#scLienzoOrig{position:absolute;left:0;top:0;transform-origin:0 0;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.sc-caja.pixel canvas{image-rendering:pixelated}
.sc-caja canvas.sc-detalle{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;visibility:hidden;transform:none;box-shadow:none}
.sc-caja[data-herr=mano]{cursor:grab}
.sc-caja[data-herr=mano].arrastrando{cursor:grabbing}
.sc-caja[data-herr=gotero],.sc-caja[data-herr=varita]{cursor:crosshair}
.sc-caja[data-herr=pincel],.sc-caja[data-herr=borrador]{cursor:none}
.sc-caja[data-herr=lazo]{cursor:crosshair}
.sc-cursor{position:absolute;pointer-events:none;border-radius:50%;border:1.5px solid #1f2a37;box-shadow:0 0 0 1.5px #fff;transform:translate(-50%,-50%)}
.sc-lazo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sc-lazo path{fill:rgba(11,127,171,.12);stroke:#0b7fab;stroke-width:1.5;stroke-dasharray:5 4}
.sc-etq{position:absolute;left:10px;top:10px;background:rgba(31,42,55,.85);color:#fff;font-size:12px;padding:4px 10px;border-radius:20px;pointer-events:none;max-width:calc(100% - 200px)}
.sc-etq:empty{display:none}
.sc-comp{position:absolute;top:0;bottom:0;width:0;border-left:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.25);cursor:ew-resize;z-index:3}
.sc-comp span{position:absolute;top:50%;left:-16px;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.3)}
.sc-comp span::before{content:"‹ ›";position:absolute;inset:0;display:grid;place-items:center;font-weight:800;color:var(--t);font-size:13px}
.sc-mini{position:absolute;right:10px;bottom:10px;width:150px;height:150px;background:#fff;border:1px solid var(--b);border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.1);padding:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.sc-mini canvas{max-width:100%;max-height:100%}
.sc-mini-vp{position:absolute;border:2px solid var(--a);pointer-events:none}
.sc-caja .qf-ia{z-index:5}

.sc-tira{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;flex:none}
.sc-tp{flex:none;width:104px;background:#fff;border:1.5px solid var(--b);border-radius:10px;padding:5px;font-size:11px;cursor:pointer;text-align:left}
.sc-tp.sel{border-color:var(--a);box-shadow:0 0 0 2px #e7f9fd}
.sc-tp.oculta{opacity:.45}
.sc-tp>div{aspect-ratio:1/1;border:1px solid #eef0f3;border-radius:6px;display:grid;place-items:center;overflow:hidden;background:#fff}
.sc-tp canvas{max-width:100%;max-height:100%}
.sc-tp b{display:block;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Panel derecho */
.sc-panel{width:360px;flex:none;background:#fff;border-left:1px solid var(--b);padding:12px 14px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.sc-ptabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.sc-panel section{display:flex;flex-direction:column;gap:8px}
.sc-panel section>div{display:flex;flex-direction:column;gap:8px}
.sc-h{font-size:13px;color:var(--t)}
.sc-lbl{font-size:12.5px;font-weight:600;color:#374151;display:flex;justify-content:space-between;align-items:center;gap:8px;margin:2px 0 -4px}
.sc-lbl output{font-size:11.5px;font-weight:700;background:#f1f3f5;border-radius:6px;padding:1px 8px;color:var(--t);white-space:nowrap}
.sc-rng{width:100%;accent-color:var(--t);margin:2px 0}
.sc-ayuda{font-size:11.5px;color:var(--g);line-height:1.45;margin:0}
.sc-div{height:1px;background:var(--b);margin:4px 0}
.sc-sw{display:flex!important;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#374151;margin:0;cursor:pointer;min-height:26px}
.sc-sw input{width:17px;height:17px;accent-color:var(--a);flex:none}

.sc-detecta{display:flex;gap:10px;align-items:flex-start;background:#e7f9fd;border:1px solid #b9ecf8;border-radius:10px;padding:9px 11px;flex-direction:row!important}
.sc-detecta>i{font-size:1.3rem;color:var(--a);margin-top:1px}
.sc-detecta b{display:block;font-size:12.5px}
.sc-detecta span{display:block;font-size:11.5px;color:#374151;line-height:1.4}
.sc-detecta.cmyk{background:#fff6db;border-color:#ffe08a}
.sc-detecta.cmyk>i{color:#8a6100}
.sc-seg{display:grid!important;grid-template-columns:1fr 1fr;gap:6px!important}
.sc-seg button{border:1.5px solid var(--b);background:#fff;border-radius:9px;min-height:38px;font-size:12.5px;font-weight:600;color:var(--t)}
.sc-seg.sc-seg3{grid-template-columns:repeat(3,1fr)}
.sc-seg button.on{background:var(--t);border-color:var(--t);color:#fff;font-weight:700}

.sc-cant{display:flex!important;flex-direction:row!important;align-items:center;justify-content:space-between;gap:8px}
.sc-cant>div{display:flex;align-items:center;gap:6px}
.sc-cant>div>b{min-width:22px;text-align:center;font-size:14px}
.sc-mini-b{width:30px;height:30px;border:1px solid var(--b);background:#fff;border-radius:8px;font-size:16px;color:var(--t);display:grid;place-items:center;padding:0}
.sc-acc{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1.5px solid var(--b);background:#fff;border-radius:9px;font-size:12.5px;font-weight:700;color:var(--t);min-height:36px;padding:0 10px}
.sc-acc:hover:not(:disabled){border-color:var(--t)}
.sc-acc:disabled{opacity:.45}
.sc-acc.sm{min-height:30px;font-size:11.5px;padding:0 9px}
.sc-acc.negro{background:var(--t);border-color:var(--t);color:#fff}
.sc-acc.w{width:100%}
.sc-acc.grande{min-height:44px;font-size:14px}
.sc-acc.on{background:var(--t);border-color:var(--t);color:#fff}

.sc-sug{flex-direction:row!important;gap:10px!important;background:#fff6db;border:1px solid #ffe08a;border-radius:10px;padding:9px 11px;font-size:12.5px;line-height:1.45}
.sc-sug>svg{flex:none;color:#8a6100;margin-top:2px}
.sc-sug-acc{display:flex;gap:6px;margin-top:6px}
.sc-lista-hd{display:flex!important;flex-direction:row!important;justify-content:space-between;align-items:baseline;margin-top:2px}
.sc-lista-hd span{font-size:11.5px;color:var(--g)}
.sc-tintas{gap:3px!important}
.sc-t{display:flex;align-items:center;gap:7px;padding:6px 6px;border-radius:10px;border:1.5px solid transparent;cursor:pointer;background:#fff}
.sc-t:hover{background:#f8f9fa}
.sc-t.sel{border-color:var(--a);background:#e7f9fd}
.sc-t.oculta .sc-chip,.sc-t.oculta .sc-t-txt{opacity:.4}
.sc-t.arrastra{opacity:.4}
.sc-t.sobre{box-shadow:0 -2px 0 var(--a)}
.sc-t-asa{color:#9aa1a9;cursor:grab;display:grid;place-items:center;width:12px;flex:none}
.sc-t input[type=checkbox]{width:16px;height:16px;accent-color:var(--a);flex:none;margin:0}
.sc-chip{width:26px;height:26px;border-radius:7px;border:1px solid rgba(0,0,0,.18);flex:none;position:relative;overflow:hidden;cursor:pointer}
.sc-chip input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.sc-t-txt{flex:1;min-width:0;line-height:1.3}
.sc-t-txt b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
.sc-t-txt small{color:var(--g);font-size:11px}
.sc-t-b{width:28px;height:28px;border:1px solid var(--b);background:#fff;border-radius:7px;display:grid;place-items:center;color:#4b5563;flex:none;padding:0;font-size:15px}
.sc-t-b.on{background:var(--t);border-color:var(--t);color:#fff}
.sc-t-fondo{border:1.5px dashed var(--b);color:var(--g)}
.sc-t-fondo a{font-size:12px;font-weight:600;white-space:nowrap}
.sc-adentro{display:flex;align-items:center;gap:5px;font-size:11px;color:#374151;margin:3px 0 0;cursor:pointer;font-weight:600}
.sc-adentro input{width:14px;height:14px;accent-color:var(--a)}
.sc-acciones{display:grid!important;grid-template-columns:1fr 1fr;gap:6px!important}
.sc-plancha{border:1px solid var(--b);border-radius:12px;padding:12px;gap:6px!important}
.sc-plancha:empty{display:none!important}
.sc-plancha .sc-nombre{border:1px solid var(--b);border-radius:7px;padding:5px 8px;font:inherit;font-size:12.5px;width:100%}
.sc-plancha .sc-seg button{min-height:34px}

.sc-prendas{display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:7px!important}
.sc-prendas button,.sc-prenda-otro{width:32px;height:32px;border-radius:50%;border:1px solid #c8ccd2;cursor:pointer;padding:0;position:relative;margin:0}
.sc-prendas button.on{box-shadow:0 0 0 2px #fff inset,0 0 0 3px var(--a)}
.sc-prenda-otro{display:grid;place-items:center;background:#fff;color:var(--g);overflow:hidden}
.sc-prenda-otro.on{box-shadow:0 0 0 3px var(--a)}
.sc-prenda-otro input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.sc-medida{display:flex!important;flex-direction:row!important;gap:6px}
.sc-medida input{flex:1;min-width:0}
.sc-medida select{width:auto}
.sc-formatos{gap:6px!important}
.sc-formatos label{display:flex;gap:9px;align-items:flex-start;border:1.5px solid var(--b);border-radius:10px;padding:8px 10px;cursor:pointer;margin:0}
.sc-formatos label:has(input:checked){border-color:var(--a);background:#e7f9fd}
.sc-formatos input{margin-top:3px;accent-color:var(--a)}
.sc-formatos b{display:block;font-size:12.5px}
.sc-formatos small{color:var(--g);font-size:11.5px}

/* Pantallas medianas: el panel baja */
@media(max-width:1199px){
  .sc-panel{width:320px}
  .sc-vistas{margin-left:0}
}
/* Celular: todo en una columna */
@media(max-width:860px){
  .sc-editor{height:auto;min-height:0}
  .sc-barra{padding:6px 8px;gap:6px}
  .sc-volver span,.sc-descargar span{display:none}
  .sc-archivo{flex:1}
  .sc-archivo b{max-width:none}
  .sc-archivo span{display:none}
  .sc-vistas{order:5;width:100%;display:grid;grid-template-columns:repeat(4,1fr)}
  .sc-zoom{order:4}
  .sc-opciones{padding:6px 10px;gap:10px}
  .sc-opciones>span{display:none}
  .sc-opciones input[type=range]{width:90px}
  .sc-cuerpo{flex-direction:column}
  .sc-herrs{order:2;width:100%;flex-direction:row;justify-content:space-around;border-right:0;border-bottom:1px solid var(--b);border-top:1px solid var(--b);padding:4px;overflow-x:auto}
  .sc-herrs-sep{width:1px;height:32px;margin:0 2px}
  .sc-centro{order:1;padding:8px}
  .sc-caja{flex:none;height:52vh;min-height:280px}
  .sc-mini{display:none}
  .sc-panel{order:3;width:100%;border-left:0;border-radius:16px 16px 0 0;box-shadow:0 -6px 18px rgba(0,0,0,.06)}
  .sc-etq{max-width:calc(100% - 20px)}
}