/* ===================== carrito ===================== */
.backdrop{
  position:fixed;inset:0;z-index:50;background:oklch(.168 .030 15 / .55);
  backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .35s ease;
}
.backdrop.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;z-index:60;height:100%;width:min(27rem,100%);
  display:flex;flex-direction:column;background:var(--canvas);
  border-left:1px solid var(--line);transform:translateX(100%);visibility:hidden;
  transition:transform .42s cubic-bezier(.3,.8,.25,1),visibility 0s linear .42s;
}
.drawer.open{
  transform:translateX(0);visibility:visible;
  transition:transform .42s cubic-bezier(.3,.8,.25,1),visibility 0s;
}
.drawer__head{display:flex;align-items:center;gap:1rem;padding:1.3rem var(--pad);border-bottom:1px solid var(--line-soft)}
.drawer__head h3{margin-right:auto}
.drawer__body{flex:1;overflow-y:auto;padding:1.2rem var(--pad)}
.drawer__foot{border-top:1px solid var(--line-soft);padding:1.2rem var(--pad) 1.5rem;background:var(--surface)}
.line{display:flex;gap:.9rem;padding:.95rem 0;border-bottom:1px solid var(--line-soft)}
.line__media{width:4.6rem;height:4.6rem;border-radius:var(--r-md);overflow:hidden;flex:none;background:var(--bg-200)}
.line__media svg,.line__media img{width:100%;height:100%;object-fit:cover}
.line__info{flex:1;min-width:0}
.line__name{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.15rem;line-height:1.2}
.line__meta{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);margin-top:.15rem}
.line__row{display:flex;align-items:center;gap:.7rem;margin-top:.6rem}
.qty{display:inline-flex;align-items:center;gap:.1rem;border:1px solid var(--line);border-radius:999px;padding:.12rem}
.qty button{width:1.75rem;height:1.75rem;border-radius:999px;display:grid;place-items:center;color:var(--ink-soft)}
.qty button:hover{background:var(--surface-alt);color:var(--ink)}
.qty span{min-width:1.7rem;text-align:center;font-size:.9rem}
.line__price{margin-left:auto;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.2rem}
.line__del{color:var(--ink-mute)}
.line__del:hover{color:var(--pri-500)}
.line__del .icon{width:1rem;height:1rem}
.cart-empty{text-align:center;padding:3.5rem 1rem}
.cart-empty svg{width:3rem;height:3rem;margin:0 auto 1.2rem;color:var(--ink-mute);stroke-width:1.2}
.cart-empty p{color:var(--ink-soft);font-size:.94rem;max-width:26ch;margin-inline:auto}

.box{
  border:1px solid color-mix(in oklab,var(--gold) 45%,transparent);border-radius:var(--r-lg);
  background:color-mix(in oklab,var(--gold) 12%,transparent);color:var(--ink);
  padding:1rem 1.1rem;margin-bottom:1rem;position:relative;overflow:hidden;
}
.box__chess{position:absolute;inset-inline:0;top:0}
.box__top{display:flex;align-items:center;gap:.8rem}
.box__title{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.box__msg{font-size:.86rem;margin:.55rem 0 0;line-height:1.5}
.box__msg b{font-weight:500}
.switch{
  margin-left:auto;width:44px;height:24px;border-radius:999px;flex:none;
  background:var(--sec-400);position:relative;transition:background-color .25s ease;
}
.switch[aria-checked="true"]{background:var(--gold)}
.switch::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:999px;
  background:var(--bg-50);transition:transform .25s ease;
}
.switch[aria-checked="true"]::after{transform:translateX(20px)}
.totals{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.1rem;font-size:.9rem}
.totals div{display:flex;justify-content:space-between;gap:1rem;color:var(--ink-soft)}
.totals .strike{text-decoration:line-through;color:var(--ink-mute)}
.totals .save{color:var(--gold)}
.totals .grand{
  border-top:1px solid var(--line);padding-top:.7rem;margin-top:.3rem;
  font-family:'Cormorant Garamond',Georgia,serif;font-size:1.55rem;color:var(--ink);
}
.totals .grand span:first-child{font-family:'Jost',sans-serif;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);align-self:center}
/* ===================== asignación de piezas a cajas (nuevo) ===================== */
.line__assigns{display:flex;flex-direction:column;gap:.4rem;margin-top:.6rem}
.line__assign{display:flex;align-items:center;gap:.5rem;font-size:.76rem;color:var(--ink-mute)}
.line__assign select{
  flex:1;padding:.35rem .6rem;border-radius:.4rem;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-size:.78rem;font-family:inherit;
}
.line__noapply{font-size:.74rem;color:var(--ink-mute);margin-top:.5rem;font-style:italic}
.box__alert{
  margin:.5rem 0 0;font-size:.78rem;line-height:1.4;color:var(--pri-700,#8a4a2a);
  background:color-mix(in oklab, var(--accent) 14%, transparent);
  border-radius:.4rem;padding:.5rem .7rem;
}

/* ===================== asignación de piezas a cajas (nuevo) ===================== */
.line__assigns{display:flex;flex-direction:column;gap:.4rem;margin-top:.6rem}
.line__assign{display:flex;align-items:center;gap:.5rem;font-size:.76rem;color:var(--ink-mute)}
.line__assign select{
  flex:1;padding:.35rem .6rem;border-radius:.4rem;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-size:.78rem;font-family:inherit;
}
.line__noapply{font-size:.74rem;color:var(--ink-mute);margin-top:.5rem;font-style:italic}
.box__alert{
  margin:.5rem 0 0;font-size:.78rem;line-height:1.4;color:var(--pri-700,#8a4a2a);
  background:color-mix(in oklab, var(--accent) 14%, transparent);
  border-radius:.4rem;padding:.5rem .7rem;
}

/* ===================== caja virtual: chips animados ===================== */
.box{position:relative;overflow:hidden;transition:border-color .3s ease,box-shadow .3s ease}
.box--building{border-style:dashed}
.box--formed{border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent)}
.box__count{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:600}
.box__chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.box__chips--pend{margin-top:.3rem;opacity:.75}
.box__chip{
  display:inline-block;padding:.3rem .65rem;border-radius:999px;font-size:.72rem;
  background:color-mix(in oklab, var(--accent) 16%, var(--surface));color:var(--ink);
  animation:chipIn .35s cubic-bezier(.2,.8,.3,1.3) backwards;
}
.box__chips--pend .box__chip{background:var(--surface-alt);border:1px dashed var(--line)}
.box__chip:nth-child(1){animation-delay:.02s}
.box__chip:nth-child(2){animation-delay:.08s}
.box__chip:nth-child(3){animation-delay:.14s}
.box__chip:nth-child(4){animation-delay:.2s}
.box__chip:nth-child(5){animation-delay:.26s}
.box__chip:nth-child(6){animation-delay:.32s}
.box__chip:nth-child(n+7){animation-delay:.36s}
@keyframes chipIn{
  from{opacity:0;transform:translateY(8px) scale(.6)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.box--pulse{animation:boxPulse .85s ease}
@keyframes boxPulse{
  0%{box-shadow:0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent)}
  40%{box-shadow:0 0 0 8px color-mix(in oklab, var(--accent) 0%, transparent)}
  100%{box-shadow:0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent)}
}
@media (prefers-reduced-motion: reduce){
  .box__chip{animation:none}
  .box--pulse{animation:none}
}

/* varias tarjetas de box apiladas */
#cajaEstados .box + .box{margin-top:.6rem}