:root{
  --papel:#f4f4f2; --sup:#ffffff;
  --tinta:#151a21; --tinta-2:#5b6472; --tinta-3:#8a919c;
  --linea:#e3e3df; --linea-fuerte:#cfd0cc;
  --azul:#324fa7;
  --ok:#2f7a52; --ok-f:#e8f1ec;
  --justo:#9a6410; --justo-f:#f8f0df;
  --mal:#a8242c; --mal-f:#f9eaea;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papel:#0f1319; --sup:#161b23; --tinta:#e8eaee; --tinta-2:#9aa3b1; --tinta-3:#6f7786;
    --linea:#252b35; --linea-fuerte:#38404d; --azul:#7d93e0;
    --ok:#6cc08d; --ok-f:#16261d; --justo:#dfae5c; --justo-f:#292315; --mal:#e9868c; --mal-f:#2b191b;
  }
}
:root[data-theme="dark"]{
  --papel:#0f1319; --sup:#161b23; --tinta:#e8eaee; --tinta-2:#9aa3b1; --tinta-3:#6f7786;
  --linea:#252b35; --linea-fuerte:#38404d; --azul:#7d93e0;
  --ok:#6cc08d; --ok-f:#16261d; --justo:#dfae5c; --justo-f:#292315; --mal:#e9868c; --mal-f:#2b191b;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--papel); color:var(--tinta);
  font-family:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  padding-block:20px 44px; padding-left:18px; padding-right:18px;
}
h1,h2,h3{font-family:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
button,input{font:inherit}
input:focus-visible,button:focus-visible{outline:2px solid var(--azul); outline-offset:2px}

.hoja{max-width:1560px; margin:0 auto; display:flex; flex-direction:column; gap:18px}

/* ---------- cabecera ---------- */
.cabecera{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.marca-blu{display:flex; align-items:center; color:var(--tinta); text-decoration:none; flex:none}
.logo-blu{height:26px; width:auto; display:block}
.marca-blu:hover{opacity:.72}
.titulos{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; min-width:0}
h1{font-size:clamp(20px,3vw,26px); font-weight:800; letter-spacing:-.02em; margin:0}
.cabecera p{margin:0; color:var(--tinta-2); font-size:13.5px; max-width:60ch}

/* ---------- layout ---------- */
.taller{display:grid; grid-template-columns:232px minmax(0,1fr) 300px; gap:16px; align-items:start}

/* ---------- casilleros de producto ---------- */
.columna{display:flex; flex-direction:column; gap:14px}
.caja{background:var(--sup); border:1px solid var(--linea); border-radius:3px; padding:13px}
.caja h2{margin:0 0 10px; font-size:11.5px; font-weight:800; letter-spacing:.07em;
         text-transform:uppercase; color:var(--tinta-3)}

.casilleros{display:flex; flex-direction:column; gap:5px}
.casillero{display:flex; align-items:center; gap:9px; width:100%; text-align:left;
           background:none; border:1px solid transparent; border-radius:3px; padding:7px 8px; cursor:pointer; color:inherit}
.casillero:hover{background:var(--papel)}
.casillero[aria-pressed="true"]{border-color:var(--linea-fuerte); background:var(--papel)}
.punto{width:22px; height:22px; border-radius:3px; flex:none; border:1px solid rgba(0,0,0,.2)}
.texto{display:flex; flex-direction:column; min-width:0}
.nom{font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sub{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--tinta-3)}

/* ---------- escena ---------- */
.escena{border:1px solid var(--linea); border-radius:3px; overflow:hidden;
        display:flex; align-items:center; justify-content:center;
        padding:14px; min-height:clamp(340px,62vh,760px)}
.bolsa{position:relative; width:100%; max-width:1180px; aspect-ratio:1600/893}
.bolsa>*{position:absolute; inset:0; width:100%; height:100%}
#capaColor{
  -webkit-mask-image:url(../assets/doypack/silueta.png); mask-image:url(../assets/doypack/silueta.png);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
#capaSombra,#capaArte{object-fit:contain; pointer-events:none}
#capaArte.invertido{filter:invert(1)}

/* ---------- selector de color ---------- */
.sel{display:flex; flex-direction:column; gap:9px}
.sel-sv{
  position:relative; width:100%; aspect-ratio:1.9/1; min-height:124px;
  border:1px solid var(--linea-fuerte); border-radius:3px; cursor:crosshair; touch-action:none;
  background:
    linear-gradient(to top, #000, rgba(0,0,0,0)),
    linear-gradient(to right, #fff, var(--tono, #f00));
}
.sel-sv.arrastrando{cursor:none}
.sel-punto{
  position:absolute; width:14px; height:14px; border-radius:50%; transform:translate(-50%,-50%);
  border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35); pointer-events:none;
}
.sel-tono-fila{display:flex; align-items:center; gap:9px}
.sel-muestra{width:34px; height:26px; border-radius:3px; border:1px solid var(--linea-fuerte); flex:none}
.sel-tono{
  flex:1; min-width:0; appearance:none; -webkit-appearance:none; height:14px; border-radius:3px;
  border:1px solid var(--linea-fuerte); cursor:pointer; margin:0;
  background:linear-gradient(to right,
    #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
}
.sel-tono::-webkit-slider-thumb{
  -webkit-appearance:none; width:12px; height:20px; border-radius:2px;
  background:#fff; border:1px solid rgba(0,0,0,.5); box-shadow:0 1px 3px rgba(0,0,0,.3); cursor:pointer;
}
.sel-tono::-moz-range-thumb{
  width:12px; height:20px; border-radius:2px; background:#fff;
  border:1px solid rgba(0,0,0,.5); box-shadow:0 1px 3px rgba(0,0,0,.3); cursor:pointer;
}
.sel-campos{display:grid; grid-template-columns:1fr repeat(3, 46px); gap:5px; align-items:end}
.sel-campo{display:flex; flex-direction:column; gap:2px; min-width:0}
.sel-campo>span{font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--tinta-3)}
.sel-campo input{
  width:100%; min-width:0; font-family:"IBM Plex Mono",monospace; font-size:12.5px; text-transform:uppercase;
  padding:6px 7px; border:1px solid var(--linea-fuerte); border-radius:3px;
  background:var(--papel); color:var(--tinta); appearance:textfield; -moz-appearance:textfield;
}
.sel-campo input::-webkit-outer-spin-button,
.sel-campo input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.sel-gotero{
  grid-column:1 / -1; border:1px solid var(--linea-fuerte); background:var(--papel); color:var(--tinta-2);
  border-radius:3px; padding:6px 10px; font-size:12.5px; cursor:pointer; margin-top:3px;
}
.sel-gotero:hover{border-color:var(--tinta-3); color:var(--tinta)}

/* ---------- controles ---------- */
.picker{display:flex; align-items:center; gap:10px}
input[type=color]{inline-size:48px; block-size:48px; padding:0; border:1px solid var(--linea-fuerte);
                  border-radius:3px; background:none; cursor:pointer}
input[type=color]::-webkit-color-swatch-wrapper{padding:3px}
input[type=color]::-webkit-color-swatch{border:none; border-radius:2px}
input[type=text]{flex:1; min-width:0; font-family:"IBM Plex Mono",monospace; font-size:13.5px;
                 text-transform:uppercase; padding:8px 9px; border:1px solid var(--linea-fuerte);
                 border-radius:3px; background:var(--papel); color:var(--tinta)}

.grupo{margin-top:12px}
.grupo h3{margin:0 0 6px; font-size:10.5px; font-weight:500; color:var(--tinta-3); letter-spacing:.04em}
.chips{display:flex; flex-wrap:wrap; gap:5px}
.chip{width:27px; height:27px; border-radius:3px; border:1px solid rgba(0,0,0,.18); cursor:pointer; padding:0}
.chip[aria-pressed="true"]{outline:2px solid var(--tinta); outline-offset:2px}

.fila{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px}
.fila>span{color:var(--tinta-2)}
.seg{display:flex; border:1px solid var(--linea-fuerte); border-radius:3px; overflow:hidden}
.seg button{border:none; background:var(--papel); color:var(--tinta-2); font-size:12.5px; padding:6px 10px; cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--tinta); color:var(--papel)}

.lectura{display:flex; flex-direction:column; gap:6px}
.medida{display:flex; align-items:center; justify-content:space-between; gap:8px;
        border-radius:3px; padding:7px 9px; font-size:12.5px}
.medida b{font-family:"IBM Plex Mono",monospace; font-size:13.5px}
.m-ok{background:var(--ok-f); color:var(--ok)}
.m-justo{background:var(--justo-f); color:var(--justo)}
.m-mal{background:var(--mal-f); color:var(--mal)}
.veredicto{font-size:12.5px; color:var(--tinta-2); margin:9px 0 0}

/* ---------- variantes guardadas ---------- */
.guardar{display:flex; gap:6px; margin-bottom:10px}
.guardar input{flex:1}
.btn{border:1px solid var(--linea-fuerte); background:var(--papel); color:var(--tinta);
     border-radius:3px; padding:8px 11px; font-size:13px; cursor:pointer; white-space:nowrap}
.btn:hover{border-color:var(--tinta-3)}
.btn.principal{background:var(--tinta); color:var(--papel); border-color:var(--tinta)}

.variante{display:flex; align-items:center; gap:4px}
.aplicar{flex:1; display:flex; align-items:center; gap:9px; text-align:left; background:none;
         border:1px solid transparent; border-radius:3px; padding:6px 7px; cursor:pointer; color:inherit; min-width:0}
.aplicar:hover{background:var(--papel); border-color:var(--linea)}
.vacio{margin:0; font-size:12.5px; color:var(--tinta-3)}
.btn.sutil{width:100%; margin-top:9px; font-size:12.5px; color:var(--tinta-2); padding:6px 10px}
.btn.peligro{color:var(--mal); border-color:var(--linea-fuerte)}
.btn.peligro:hover{border-color:var(--mal); background:var(--mal-f)}
.borrar{font-size:11.5px; color:var(--tinta-3); padding:5px 8px; border:1px solid transparent; border-radius:3px;
        background:none; cursor:pointer}
.borrar:hover{color:var(--mal); background:var(--mal-f); border-color:var(--mal-f)}
.estado-guardado{margin:0 0 10px; font-size:12.5px; color:var(--tinta-2)}
.estado-guardado.mal{color:var(--mal)}
.motivo-guardado{margin:-4px 0 10px; font-size:12px; color:var(--justo);
                 background:var(--justo-f); border-radius:3px; padding:7px 9px}
#aviso{display:block; margin:10px 0 0; font-size:12.5px; color:var(--ok)}

/* ---------- pie ---------- */
.acciones{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.archivo{position:relative; overflow:hidden; display:inline-block}
.archivo input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%}
.pie{border-top:1px solid var(--linea); padding-top:12px; font-size:12px; color:var(--tinta-3);
     display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

@media (max-width:1200px){
  .taller{grid-template-columns:200px minmax(0,1fr)}
  .columna.derecha{grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px}
}
@media (max-width:760px){
  .taller{grid-template-columns:1fr}
  .columna.derecha{grid-column:auto}
  .escena{min-height:300px}
}

.pie strong{color:var(--tinta-2); font-weight:500}