/* ===== Tabla mejorada ===== */
.table-wrap{
  overflow-x: auto;
  max-height: 60vh;
  scrollbar-width: thin;
}
.table{
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}
.table th, .table td{
  padding: 10px 14px;
  text-align: left;
  vertical-align: middle;
}
.table td:first-child{
  display: flex;
  align-items: center;
  gap: 10px;
}
.table .thumb{
  width: 80px; height: auto;
  border-radius: 8px;
  transition: transform .2s ease;
  cursor: alias; /* comunica que abre ficha técnica */
}
.table .thumb:hover{ transform: scale(1.05); }
.pcode{ font-weight: 700; }

/* ===== Lightbox ===== */
.lb-backdrop{
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.7);
  display: grid; place-items: center;
  animation: lbFade .15s ease;
}
@keyframes lbFade { from{opacity:0} to{opacity:1} }

.lb-card{
  position: relative;
  max-width: 90vw; max-height: 90vh;
  display: flex; flex-direction: column; align-items: center;
  background: rgba(20,20,20,.9);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px; padding: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.lb-img{
  display:block;
  max-width: 86vw; max-height: 80vh; object-fit: contain;
  border-radius: 10px; background:#fff;
}
.lb-close{
  position: absolute; top: 8px; right: 8px;
  width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12);
  color: #fff; cursor: pointer;
}
.lb-close:hover{ background: rgba(255,255,255,.25); }
.lb-caption{ margin-top:6px; text-align:center; color:#ccc; font-size:.9rem; }

/* ===== Responsive: tabla como tarjetas en móvil ===== */
@media (max-width: 680px){
  .table-wrap{border:none; background:transparent}
  .table{display:block; border:0; min-width:0}
  .table thead{display:none}
  .table tbody{display:grid; gap:12px}
  .table tr{
    display:grid;
    background: var(--card, rgba(255,255,255,.04));
    border:1px solid var(--stroke, rgba(255,255,255,.08));
    border-radius:14px;
    padding:10px 12px;
    grid-template-columns: 1fr 1fr;
    gap:6px 12px;
  }
  .table td{
    display:flex; gap:8px; border:0; padding:6px 0;
    white-space:normal;
  }
  .table td::before{
    content: attr(data-label);
    min-width: 92px;
    font-weight:700;
    color: var(--muted, #bbb);
  }
}