* {
  box-sizing: border-box;
}

:root {
  --bg: #f0f2f5;
  --card: #ffffff;
  --border: #e5e7eb;
  --border-light: #f0f1f3;
  --text: #1a1a2e;
  --muted: #6b7280;
  --accent: #111827;
  --accent-hover: #1f2937;
  --brand: #c0392b;
  --brand-soft: #fdecea;
  --radius: 18px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 32px rgba(15, 23, 42, 0.08);
}

body {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    Roboto,
    sans-serif;
  background:
    radial-gradient(1200px 600px at 10% -10%, #ffeae6 0%, transparent 60%),
    radial-gradient(900px 500px at 95% 110%, #e8f0ff 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  margin: 0;
  padding: 28px 18px;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

.card {
  background: var(--card);
  padding: 28px 28px 24px;
  border-radius: var(--radius);
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  box-shadow: var(--shadow);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, var(--brand) 0%, #e85d4a 50%, var(--brand) 100%);
}

/* ===== Header (icon + title + tabs) ===== */
.sug-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}

.sug-title-block {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.sug-title-icon {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: linear-gradient(135deg, var(--brand-soft) 0%, #fde0db 100%);
  border: 1px solid #f6c8c1;
  box-shadow: 0 2px 6px rgba(192, 57, 43, 0.08);
}
.sug-title-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--text);
  line-height: 1.15;
}

.sug-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.muted {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

#cliente {
  display: inline-block;
  font-size: 13px;
  color: #374151;
  font-weight: 600;
  margin: 4px 0 8px;
  background: #f3f4f6;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
#cliente:empty {
  display: none;
}
/* Vendedor: ocultar chip cuando hay dropdown */
.card:has(#sug-cliente-selector) #cliente {
  display: none;
}

/* ===== Selector vendedor ===== */
.sug-cliente-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 12px;
}
.sug-cliente-label {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  letter-spacing: -0.1px;
}
.sug-cliente-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: #fff
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' width='12' height='8'><path fill='%23374151' d='M6 8 0 0h12z'/></svg>")
    no-repeat right 14px center;
  background-size: 10px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 36px 9px 16px;
  min-width: 260px;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.sug-cliente-select:hover {
  border-color: #9ca3af;
}
.sug-cliente-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.1);
}

.actions {
  display: flex;
  gap: 8px;
}

button {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: #111;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}

button.subtle {
  background: #fff;
  color: #111;
}

button.hidden {
  display: none;
}

.tableWrap {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: auto;
  flex: 1;
  min-height: 0;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 1),
    0 1px 2px rgba(0, 0, 0, 0.02);
}
.tableWrap::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.tableWrap::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 8px;
}
.tableWrap::-webkit-scrollbar-thumb {
  background: #c4c7cc;
  border-radius: 8px;
}
.tableWrap::-webkit-scrollbar-thumb:hover {
  background: #a0a4ab;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

th {
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
  color: #fff;
  padding: 11px 10px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  position: sticky;
  top: 0;
  z-index: 2;
}

td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border-light);
  text-align: center;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

tbody tr {
  transition: background 0.12s ease;
}
tbody tr:nth-child(even) {
  background: #fafbfc;
}
tbody tr:hover {
  background: #f4f6f9;
}

td.desc {
  text-align: left;
  white-space: normal;
}

td.msg {
  text-align: left;
  white-space: normal;
}

.moreWrap {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

@media (max-width: 720px) {
  body {
    padding: 12px 8px;
  }

  .card {
    padding: 16px 12px 14px;
    border-radius: 14px;
    width: 100%;
  }

  .sug-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
    margin-bottom: 10px;
  }
  .sug-title-block {
    gap: 10px;
    min-width: 0;
    flex: 1;
  }
  .sug-title-icon {
    width: 38px;
    height: 38px;
    font-size: 20px;
    border-radius: 10px;
  }

  h1 {
    font-size: 16px;
  }
  .sug-subtitle {
    display: none;
  }

  #cliente {
    display: none;
  }

  #status {
    font-size: 12px;
  }

  .sug-tabs {
    margin: 0;
    gap: 6px;
    flex-shrink: 0;
  }

  .sug-tab {
    padding: 7px 12px;
    font-size: 12px;
    border-radius: 999px;
    font-weight: 700;
  }

  /* --- Tabla → Cards --- */
  .tableWrap {
    border: none;
    border-radius: 0;
    margin-top: 6px;
    -webkit-overflow-scrolling: touch;
  }

  table,
  thead,
  tbody,
  tr,
  th,
  td {
    display: block;
    width: 100%;
  }

  table {
    table-layout: auto;
  }

  thead {
    display: none;
  }

  /* Cada fila = una card */
  tr {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    position: relative;
  }

  /* Reset todas las celdas */
  td {
    border: none;
    padding: 0;
    text-align: left;
    white-space: normal;
    overflow: visible;
    font-size: 14px;
  }

  /* ── Imagen centrada arriba ── */
  td.imgcell {
    text-align: center;
    margin-bottom: 10px;
    width: 100%;
  }
  td.imgcell .sug-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    max-height: 140px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid #eee;
    background: #fafafa;
  }

  /* ── Código ── */
  td:nth-child(2) {
    font-size: 11px;
    font-weight: 600;
    color: #999;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
  }

  /* ── Descripción ── */
  td.desc {
    font-size: 15px;
    font-weight: 600;
    color: #111;
    line-height: 1.3;
    margin-bottom: 6px;
  }

  /* ── UxB y Precio: inline en una fila ── */
  td.uxb-cell,
  td.price-cell {
    display: inline-block;
    width: auto;
  }

  td.uxb-cell {
    font-size: 13px;
    color: #666;
  }
  td.uxb-cell::before {
    content: "UxB: ";
    font-weight: 500;
  }

  td.price-cell {
    float: right;
    font-size: 17px;
    font-weight: 700;
    color: #111;
  }

  /* ── Motivo ── */
  td.msg {
    clear: both;
    font-size: 12px;
    color: #888;
    line-height: 1.4;
    margin-top: 8px;
  }
  td.msg:empty {
    display: none;
  }

  /* ── Pedido (stepper + agregar) ── */
  td:last-child {
    clear: both;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
  }

  .sug-action {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
  }

  .sug-stepper {
    width: 100%;
    gap: 0;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
  }

  .sug-step-btn {
    width: 48px;
    height: 44px;
    font-size: 22px;
    border-radius: 0;
    border: none;
    background: #f5f5f5;
    flex-shrink: 0;
  }
  .sug-step-btn:first-child {
    border-right: 1px solid #ddd;
  }
  .sug-step-btn:last-child {
    border-left: 1px solid #ddd;
  }
  .sug-step-btn:active {
    background: #e8e8e8;
  }

  .sug-step-in {
    flex: 1;
    width: auto;
    height: 44px;
    font-size: 18px;
    font-weight: 600;
    border: none;
    border-radius: 0;
  }

  .sug-add-btn {
    width: 100%;
    margin-left: 0;
    padding: 13px 12px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
  }

  /* ── Info box fijo abajo ── */
  .sug-info-box {
    margin-top: 8px;
    padding: 8px 10px;
    font-size: 10px;
    flex-shrink: 0;
    line-height: 1.4;
  }

  /* ── Ver más ── */
  .vermas-btn {
    padding: 10px;
    font-size: 13px;
    margin-top: 6px;
    border-radius: 10px;
    flex-shrink: 0;
  }

  /* ── Volver ── */
  .back-btn {
    font-size: 12px;
    padding: 5px 10px;
    margin-bottom: 6px;
  }
}

.imgcell {
  width: 120px;
}

.sug-img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid #eee;
  background: #fff;
  display: block;
  margin: 0 auto;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.sug-img:hover {
  transform: scale(1.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 10;
  position: relative;
}

/* ====== STEPPER COMPACTO ====== */

/* ====== COLUMNA PEDIDO ====== */
td:last-child {
  text-align: center;
  vertical-align: middle;
}

/* contenedor interno */
.sug-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* ====== STEPPER ====== */
.sug-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 120px;
}

.sug-step-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #f6f6f6;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400; /* regular */
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.sug-step-btn:hover {
  background: #ececec;
}

/* ===== INPUT CANTIDAD ===== */

.sug-step-in {
  width: 50px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #ddd;
  text-align: center;
  font-weight: 400;
  font-size: 14px;
  outline: none;

  /* 🔥 Compatibilidad completa */
  appearance: textfield;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
}

/* Eliminar flechas en Chrome / Edge / Safari */
.sug-step-in::-webkit-outer-spin-button,
.sug-step-in::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ====== BOTÓN AGREGAR ====== */

.sug-add-btn {
  width: auto;
  min-width: 150px;
  border: none;
  background: linear-gradient(180deg, #1f2937 0%, var(--accent) 100%);
  color: #fff;
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.2px;
  white-space: nowrap;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.sug-add-btn:hover {
  background: linear-gradient(180deg, #c0392b 0%, #a82317 100%);
  box-shadow: 0 4px 12px rgba(192, 57, 43, 0.3);
  transform: translateY(-1px);
}
.sug-add-btn:active {
  transform: translateY(0) scale(0.97);
}

.sug-add-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #9ca3af;
  box-shadow: none;
  transform: none;
}

td:last-child {
  text-align: center;
  vertical-align: middle;
}

.sug-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.sug-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 120px;
}

/* (se mantiene el min-width 150px definido arriba) */

.page-loader {
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.page-loader img {
  width: 80px;
  height: auto;
}

.page-loader {
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loader-content {
  text-align: center;
}

.page-loader img {
  width: 80px;
  margin-bottom: 18px;
}

.loader-text {
  font-size: 18px;
  font-weight: 600;
  color: #111;
  letter-spacing: 0.5px;
}

@keyframes dots {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}

.dots {
  animation: dots 1.2s infinite;
}

.vermas-btn {
  margin-top: 14px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--accent);
  background: #fff;
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.vermas-btn:hover {
  background: linear-gradient(180deg, #1f2937 0%, var(--accent) 100%);
  color: #fff;
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.15);
}

.vermas-btn {
  margin-bottom: 6px;
}

.sug-info-box {
  margin-top: 18px;
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.55;
  background: linear-gradient(135deg, #fafbfc 0%, #f4f6f9 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: #4b5563;
  text-align: left;
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.sug-info-icon {
  flex: 0 0 auto;
  font-size: 22px;
  line-height: 1;
  margin-top: 1px;
}

.sug-tabs {
  display: flex;
  gap: 8px;
  margin: 0;
  flex-shrink: 0;
}

.sug-tab {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  color: #374151;
  transition: all 0.15s ease;
  letter-spacing: -0.1px;
}
.sug-tab:hover {
  border-color: #9ca3af;
  background: #f9fafb;
}
.sug-tab.active {
  background: linear-gradient(180deg, #1f2937 0%, var(--accent) 100%);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.18);
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--border);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0 auto 14px 0;
  flex-shrink: 0;
  align-self: flex-start;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  max-width: 1280px;
  width: fit-content;
}
.back-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: translateX(-2px);
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.15);
}
.back-btn span:first-child {
  font-size: 15px;
  line-height: 1;
}

/* Cuando está embebido en admin (?cod=X), ocultar Volver + info-box */
body.lk-admin-embed .back-btn {
  display: none !important;
}
body.lk-admin-embed .sug-info-box {
  display: none !important;
}

/* Admin embed: ocultar columna "Pedido" (stepper + botón Agregar al pedido) */
body.lk-admin-embed #tablaSug th:last-child,
body.lk-admin-embed #tablaSug td:last-child {
  display: none !important;
}

/* ============================================================================
   ESCALADO POR ALTO DE VIEWPORT  (desktop, tablet y All-in-One)
   ----------------------------------------------------------------------------
   El problema que resuelve: la pantalla ya era "alto fijo, la lista scrollea"
   (body 100dvh + overflow hidden, .tableWrap con flex:1 / min-height:0), pero
   TODO lo de adentro estaba en px fijos: la foto 90px, el stepper 30px, el
   header 50px, los paddings. Cuando el viewport se achica —una All-in-One con
   el escalado de Windows en 125/150%, o el zoom del navegador— esos px NO se
   achican: el navegador reporta menos px CSS de alto, el cuadro entero entra
   igual pero las filas siguen midiendo lo mismo, así que entran 2, 1 o ninguna.
   Por eso "se ve todo muy grande y explotado".

   La corrección: expresar los tamaños con clamp(mínimo, valor en vh, máximo).
   1vh es el 1% del alto del viewport, así que al hacer zoom las filas se
   achican en la MISMA proporción que el espacio disponible y la cantidad de
   productos visibles no cambia. El texto, en cambio, sí se ve más grande al
   zoomear —que es lo que uno busca al zoomear—, porque el px CSS crece en
   pantalla. Es "agrandar la letra sin agrandar la página".

   Los mínimos en px son el piso: aunque el viewport quede muy bajo, la foto no
   baja de 40px ni el botón + / − de 22px, que es el límite táctil razonable.
   Medido con estos valores: entran entre 4 y 7 filas desde 400px de alto de
   viewport para arriba (400px es un zoom de 200% en una pantalla de notebook).

   No toca el bloque de ≤720px: ahí la tabla ya se convierte en tarjetas y ese
   camino funciona. Va al final del archivo a propósito — misma especificidad
   que las reglas de arriba, gana por orden, y así se lee de un vistazo qué se
   escala y qué no.
   ========================================================================== */

@media (min-width: 721px) {
  /* DIAL: cuantos productos se ven de una. La foto es lo que define el alto de
     la fila, asi que estos dos valores son la perilla — subirlos muestra menos
     productos y mas grandes, bajarlos muestra mas.
     Medido en 8 resoluciones (1920x1080 a 911x512, o sea de Full HD a zoom
     200%): 8vh -> 5 productos, 9.8vh -> 4 (lo que se pidio), 11.5vh -> 3. */
  :root {
    --sug-foto: clamp(46px, 9.8vh, 112px);
    --sug-fila-pad: clamp(5px, 1.1vh, 12px);
  }

  body {
    padding: clamp(10px, 2.2vh, 28px) clamp(10px, 1.4vw, 18px);
  }

  .back-btn {
    padding: clamp(5px, 0.9vh, 9px) clamp(10px, 1.2vw, 16px);
    font-size: clamp(11px, 1.5vh, 13px);
    margin-bottom: clamp(6px, 1.2vh, 14px);
  }
  .back-btn span:first-child {
    font-size: clamp(12px, 1.7vh, 15px);
  }

  .card {
    padding: clamp(12px, 2.2vh, 28px) clamp(14px, 1.6vw, 28px)
      clamp(10px, 1.8vh, 24px);
  }

  /* --- Header --- */
  .sug-header {
    gap: clamp(8px, 1.2vh, 14px);
    margin-bottom: clamp(6px, 1.2vh, 14px);
  }
  .sug-title-block {
    gap: clamp(8px, 1.2vh, 14px);
  }
  .sug-title-icon {
    width: clamp(32px, 5vh, 50px);
    height: clamp(32px, 5vh, 50px);
    font-size: clamp(17px, 2.7vh, 26px);
    border-radius: clamp(9px, 1.4vh, 14px);
  }
  h1 {
    font-size: clamp(16px, 2.6vh, 24px);
  }
  .sug-subtitle {
    font-size: clamp(10px, 1.4vh, 13px);
  }
  .sug-tab {
    padding: clamp(5px, 1vh, 9px) clamp(10px, 1.1vw, 16px);
    font-size: clamp(11px, 1.5vh, 13px);
  }
  .sug-cliente-selector {
    gap: clamp(6px, 1vh, 10px);
    margin: clamp(3px, 0.7vh, 6px) 0 clamp(6px, 1.4vh, 12px);
  }
  .sug-cliente-label {
    font-size: clamp(11px, 1.5vh, 13px);
  }
  .sug-cliente-select {
    font-size: clamp(11px, 1.5vh, 14px);
    padding: clamp(5px, 1vh, 10px) clamp(28px, 2.4vw, 36px)
      clamp(5px, 1vh, 10px) clamp(10px, 1.1vw, 14px);
    min-width: clamp(180px, 22vw, 260px);
  }

  /* --- Tabla --- */
  .tableWrap {
    margin-top: clamp(6px, 1.2vh, 14px);
  }
  th {
    padding: clamp(5px, 1.1vh, 11px) 10px;
    font-size: clamp(10px, 1.3vh, 12px);
  }
  td {
    padding: var(--sug-fila-pad) 8px;
    font-size: clamp(12px, 1.8vh, 17px);
  }

  /* --- Foto: es lo que define el alto de la fila --- */
  .imgcell {
    width: clamp(64px, 11.8vh, 132px);
  }
  .sug-img {
    width: var(--sug-foto);
    height: var(--sug-foto);
    border-radius: clamp(7px, 1.2vh, 12px);
  }

  /* --- Columna Pedido --- */
  .sug-action {
    gap: clamp(3px, 0.6vh, 6px);
  }
  .sug-stepper {
    width: clamp(92px, 12.5vh, 134px);
    gap: clamp(2px, 0.5vh, 4px);
  }
  .sug-step-btn {
    width: clamp(24px, 3.6vh, 34px);
    height: clamp(24px, 3.6vh, 34px);
    font-size: clamp(14px, 2.2vh, 18px);
  }
  .sug-step-in {
    width: clamp(38px, 5.8vh, 56px);
    height: clamp(24px, 3.6vh, 34px);
    font-size: clamp(12px, 1.7vh, 15px);
  }
  .sug-add-btn {
    min-width: clamp(104px, 15vh, 160px);
    padding: clamp(5px, 0.95vh, 9px) clamp(10px, 1.4vw, 18px);
    font-size: clamp(11px, 1.55vh, 14px);
  }

  /* --- Pie --- */
  .moreWrap {
    margin-top: clamp(6px, 1vh, 12px);
  }
  .vermas-btn {
    margin-top: clamp(7px, 1.4vh, 14px);
    padding: clamp(6px, 1.2vh, 12px) 14px;
    font-size: clamp(11px, 1.4vh, 13px);
  }
  .sug-info-box {
    margin-top: clamp(8px, 1.6vh, 18px);
    padding: clamp(8px, 1.3vh, 14px) clamp(12px, 1.4vw, 18px);
    font-size: clamp(10px, 1.35vh, 13px);
    line-height: 1.45;
  }
  .sug-info-icon {
    font-size: clamp(15px, 2.2vh, 22px);
  }
}

/* Pantalla baja (zoom fuerte, o un monitor 16:9 con el escalado alto): el
   texto explicativo y el subtítulo ceden el lugar a los productos, que es a lo
   que se entra. No se pierde nada operativo. */
@media (min-width: 721px) and (max-height: 700px) {
  .sug-info-box {
    display: none;
  }
}
@media (min-width: 721px) and (max-height: 560px) {
  .sug-subtitle {
    display: none;
  }
  .back-btn {
    margin-bottom: 4px;
  }
}

/* ============================================================================
   CELULAR (≤720px): la tarjeta entraba UNA por pantalla
   ----------------------------------------------------------------------------
   Medido con la tarjeta anterior: 354px de alto en un viewport de 844px, o sea
   que se veía un producto y medio, cortado justo en el botón "Agregar". El alto
   se iba en tres cosas: la foto al ancho completo (140px), el titulo partido en
   cuatro renglones porque competía por el ancho con las pestañas, y el bloque
   de pedido apilado (stepper arriba, botón abajo: 110px).

   Se reacomoda sin cambiar el HTML ni el JS:
   - La fila pasa a grid: foto a la IZQUIERDA y los datos a la derecha, en vez
     de todo apilado. Las areas siguen el orden real de las celdas que arma
     renderSug() (img, cod, desc, uxb, precio, motivo, pedido).
   - Stepper y "Agregar al pedido" van en la MISMA linea. Los dos conservan sus
     44px de alto, que es el minimo tactil comodo.
   - El titulo se lleva su propia fila y las pestañas la de abajo, asi no se
     parte.
   - El recuadro explicativo se oculta: en 390px de ancho ocupaba media pantalla
     y no es operativo. En desktop sigue estando.
   Resultado medido: la tarjeta baja a ~170px y entran 3 productos completos.
   ========================================================================== */

@media (max-width: 720px) {
  .sug-header {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .sug-title-block {
    flex: 1 1 100%;
  }
  h1 {
    font-size: 17px;
    line-height: 1.2;
  }
  .sug-tabs {
    flex: 1 1 100%;
  }
  .sug-tab {
    flex: 1;
    padding: 6px 10px;
  }

  .sug-info-box {
    display: none;
  }

  /* La etiqueta se partia en tres renglones al lado del desplegable. */
  .sug-cliente-selector {
    flex-wrap: nowrap;
    gap: 8px;
    margin: 4px 0 8px;
  }
  .sug-cliente-label {
    white-space: nowrap;
    font-size: 12px;
  }
  .sug-cliente-select {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    padding: 8px 30px 8px 12px;
  }

  /* --- La fila: foto izquierda, datos derecha --- */
  tbody tr {
    display: grid;
    grid-template-columns: clamp(64px, 22vw, 88px) auto 1fr;
    grid-template-areas:
      "img cod    cod"
      "img desc   desc"
      "img uxb    precio"
      "img msg    msg"
      "ped ped    ped";
    column-gap: 10px;
    row-gap: 2px;
    align-items: start;
    padding: 10px;
  }

  td.imgcell {
    grid-area: img;
    width: auto;
    margin-bottom: 0;
  }
  td.imgcell .sug-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    max-height: none;
  }
  td.cod-cell {
    grid-area: cod;
  }
  td.desc {
    grid-area: desc;
    margin-bottom: 2px;
  }
  td.uxb-cell {
    grid-area: uxb;
  }
  td.price-cell {
    grid-area: precio;
    justify-self: end;
    float: none;
  }
  td.msg {
    grid-area: msg;
    margin-top: 4px;
  }
  tbody td:last-child {
    grid-area: ped;
    margin-top: 8px;
    padding-top: 8px;
  }

  /* --- Pedido en UNA linea: stepper + agregar --- */
  .sug-action {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .sug-stepper {
    width: clamp(108px, 34vw, 140px);
    flex: 0 0 auto;
  }
  .sug-step-btn {
    width: clamp(34px, 10vw, 44px);
  }
  .sug-add-btn {
    flex: 1;
    width: auto;
    min-width: 0;
    padding: 12px 8px;
    font-size: 14px;
  }
}