:root{
  --osl-primary:#5C3A96;
  --osl-accent:#F47635;
  --osl-text:#222;
  --osl-muted:#7a7a86;
  --osl-border:#e6e6ef;
  --osl-bg:#ffffff;

  --osl-radius-card:16px;
  --osl-radius-btn:999px;
  --osl-radius-thumb:12px;

  --osl-title-size:32px;
  --osl-head-title-size:22px;

  --osl-modal-max-width:92vw;
  --osl-modal-max-height:92vh;

  --osl-max-width:1320px;
  --osl-thumb-w-lg:200px; /* desktop */
  --osl-thumb-w-md:150px; /* tablet  */
  --osl-thumb-w-sm:110px; /* móvil   */
}

/* ---------- Base ---------- */
.osl-wrap{ max-width:var(--osl-max-width); margin:24px auto; padding:8px; }
.osl-title{ font-size:var(--osl-title-size); line-height:1.2; margin:0 0 12px; color:var(--osl-text); }

.osl-form{ display:flex; gap:10px; margin:6px 0 18px; }
.osl-input{ flex:1; padding:12px 14px; border:1px solid var(--osl-border); border-radius:var(--osl-radius-btn); font-size:16px; }
.osl-btn{ padding:10px 14px; border-radius:var(--osl-radius-btn); border:1px solid var(--osl-border); background:#f7f7f9; cursor:pointer; font-weight:600; }
.osl-btn--primary{ background:var(--osl-primary); color:#fff; border-color:var(--osl-primary); }
.osl-btn--ghost{ background:#fff; color:var(--osl-primary); border-color:var(--osl-primary); }
.osl-loading,.osl-empty{ color:var(--osl-muted); }

.osl-card{
  border:1px solid var(--osl-border);
  border-radius:var(--osl-radius-card);
  padding:16px;
  background:var(--osl-bg);
  overflow:hidden;
}
.osl-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.osl-head__title{ font-size:var(--osl-head-title-size); font-weight:700; color:var(--osl-text); }
.osl-head__meta{ display:flex; gap:18px; flex-wrap:wrap; color:var(--osl-muted); font-size:14px; }
.osl-head__meta strong{ color:var(--osl-text); }

/* Placeholder por defecto; si hay imagen, quitamos degradado/opacidad */
.osl-head__logo{
  width:72px;
  height:40px;
  border-radius:8px;
  background:linear-gradient(135deg,var(--osl-accent),var(--osl-primary));
  opacity:.15;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.osl-head__logo.has-img{ background:none; opacity:1; }
.osl-head__logo-img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}

.osl-wrap, .osl-wrap *{ box-sizing:border-box; }

/* ---------- Tabla base ---------- */
.osl-table-wrap{ overflow-x:auto; }
.osl-table{ width:100%; border-collapse:separate; border-spacing:0 10px; }
.osl-table thead th{ font-size:14px; color:var(--osl-muted); text-align:left; padding:0 10px 6px; }
.osl-table tbody td{
  background:#fff; border:1px solid var(--osl-border);
  padding:10px; border-left:none; border-right:none;
  vertical-align:top; line-height:1.35;
}
.osl-table tbody tr td:first-child{
  border-radius:var(--osl-radius-thumb) 0 0 var(--osl-radius-thumb);
  border-left:1px solid var(--osl-border);
}
.osl-table tbody tr td:last-child{
  border-radius:0 var(--osl-radius-thumb) var(--osl-radius-thumb) 0;
  border-right:1px solid var(--osl-border);
}
.osl-td--mono{ font-variant-numeric:tabular-nums; }

/* ---------- Ship to ---------- */
.osl-po{ margin:8px 0 14px; }
.osl-po__block{ margin:8px 0; }
.osl-po__title{ font-weight:700; color:var(--osl-primary); margin-bottom:6px; }
.osl-po__addr{ white-space:pre-wrap; line-height:1.4; color:var(--osl-text); }

/* ---------- Thumbs (con imagen + acciones) ---------- */
.osl-thumbs{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; }

.osl-thumb{
  width:var(--osl-thumb-w-lg);
  border:1px solid var(--osl-border);
  border-radius:var(--osl-radius-thumb);
  background:#fff;
  overflow:visible;
}
.osl-thumb__image{
  height:280px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-bottom:1px solid var(--osl-border);
}
.osl-thumb__image img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}
.osl-thumb__actions{
  display:flex;
  gap:8px;
  justify-content:center;
  padding:8px;
}

/* ---------- Modal ---------- */
#osl-modal{ position:fixed; inset:0; background:rgba(0,0,0,.75); display:flex; align-items:center; justify-content:center; z-index:9999; transition:.2s; opacity:0; pointer-events:none; }
#osl-modal[aria-hidden="false"]{ opacity:1; pointer-events:auto; }
.osl-modal__inner{ max-width:var(--osl-modal-max-width); max-height:var(--osl-modal-max-height); position:relative; background:#000; border-radius:var(--osl-radius-thumb); overflow:hidden; }
.osl-modal__img{ display:block; max-width:var(--osl-modal-max-width); max-height:var(--osl-modal-max-height); }
.osl-modal__close{ position:absolute; top:8px; right:8px; border:0; border-radius:999px; width:36px; height:36px; background:var(--osl-accent); color:#fff; font-size:20px; cursor:pointer; }

/* ---------- Tabla del PO (superior) ---------- */
.osl-table--po{ width:100%; table-layout:auto; }
.osl-table--po thead th{ padding-top:2px; }

/* La columna de imagen no rompe el layout y deja ver los botones */
.osl-table--po thead th:last-child{ width:14%; }
.osl-table--po tbody td:last-child{
  width:14%;
  min-width:160px;
  max-width:14%;
  text-align:right;
  overflow-x:hidden;
  overflow-y:visible; /* importante para ver botones bajo la imagen */
  white-space:normal;
}
.osl-table--po tbody td:last-child .osl-thumbs{ max-width:100%; justify-content:flex-end; }
.osl-table--po tbody td:last-child .osl-thumb{
  width:clamp(120px, 14vw, var(--osl-thumb-w-lg));
  max-width:100%;
}
.osl-table--po tbody td *{ max-width:100%; box-sizing:border-box; }

/* ---------- Desktop (≥1025px) ---------- */
@media (min-width:1025px){
  .osl-th--desc{ width:58%; }
  .osl-table--po thead th:nth-child(2){ width:11%; }
  .osl-table--po thead th:nth-child(3){ width:11%; }
  .osl-table--po thead th:nth-child(4){ width:6%; }
  .osl-table--po thead th:nth-child(5){ width:14%; }
  .osl-td--desc{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

/* ---------- Tablet (≤1024px) ---------- */
@media (max-width:1024px){
  .osl-td--desc{ white-space:normal; }
  .osl-thumb{ width:var(--osl-thumb-w-md); }
  .osl-thumb__image{ height:220px; }
  .osl-table--po tbody td:last-child .osl-thumb{
    width:clamp(110px, 18vw, var(--osl-thumb-w-md));
  }
}

/* ---------- Móvil (≤720px) ---------- */
@media (max-width:720px){
  .osl-table--resp thead{ display:none; }
  .osl-table--resp tbody tr{
    display:block; border:1px solid var(--osl-border); border-radius:12px;
    padding:10px; margin-bottom:12px; background:#fff; overflow:hidden;
  }
  .osl-table--resp tbody td{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:12px; padding:8px 4px; border:0; background:transparent;
  }
  .osl-table--resp tbody td::before{
    content:attr(data-label); font-weight:600; color:var(--osl-muted);
    margin-right:12px; flex:0 0 46%; max-width:46%; text-align:left;
  }
  .osl-table--resp tbody td > *:not(.osl-thumb):not(.osl-thumbs){ flex:1 1 auto; text-align:right; }
  .osl-thumbs{ justify-content:flex-end; }
  .osl-thumb{ width:var(--osl-thumb-w-sm); }
  .osl-thumb__image{ height:160px; }
  .osl-po__addr{ white-space:pre-line; font-size:14px; }
}