/* lightbox.css — Lightbox de imágenes y toast de notificaciones */

/* ── Lightbox ── */
.lb{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.95);
  z-index:600; align-items:center; justify-content:center;
  flex-direction:column; gap:1rem; padding:2rem;
}
.lb.open{ display:flex }
.lb img{ max-width:90vw; max-height:70vh; object-fit:contain; border-radius:8px }
.lb-info{ color:white; text-align:center }
.lb-name{ font-size:16px; font-weight:700; margin-bottom:4px }
.lb-color{ font-size:12px; color:var(--g4) }
.lb-close{
  position:fixed; top:20px; right:24px; background:rgba(255,255,255,.1);
  border:none; color:white; width:36px; height:36px; border-radius:50%; font-size:20px; cursor:pointer;
}
.lb-nav{ display:flex; gap:12px; margin-top:.5rem }
.lb-btn{ background:rgba(255,255,255,.1); border:none; color:white; padding:8px 20px; border-radius:30px; font-size:12px; cursor:pointer }
.lb-btn:hover{ background:rgba(255,255,255,.2) }
.lb-add{
  background:white; color:var(--k); border:none; padding:10px 24px;
  border-radius:var(--r); font-size:13px; font-weight:700; cursor:pointer; margin-top:.5rem;
}

/* Cantidad en lightbox */
.lb-qty-wrap{
  display:flex; align-items:center; gap:8px; margin-top:.5rem; justify-content:center;
}
.lb-qty-btn{
  background:rgba(255,255,255,.15); border:none; color:white; width:32px; height:32px;
  border-radius:6px; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.lb-qty-input{
  width:48px; text-align:center; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3);
  border-radius:6px; color:white; font-size:16px; font-weight:700; padding:4px;
}

/* ── Lightbox zoom ── */
#lbZoom{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.98);
  z-index:700; align-items:center; justify-content:center; cursor:zoom-out;
}
#lbZoomImg{ max-width:95vw; max-height:95vh; object-fit:contain }

/* ── Toast ── */
.toast{
  position:fixed; bottom:2rem; left:50%;
  transform:translateX(-50%) translateY(100px);
  background:var(--k); color:white; padding:12px 24px; border-radius:30px;
  font-size:13px; font-weight:600; z-index:700; transition:transform .3s; white-space:nowrap;
}
.toast.show{ transform:translateX(-50%) translateY(0) }