/* GNL · Insumos (fase 3 · 2026-10-14) · celular + computadora + página de producto
   Solo aplica con la clase .gnl-ins-on (páginas de Insumos). Filas: solo celular. Tarjeta y página de producto: ver fase 3 al final.
   Colores en un solo lugar: */
:root{
  --gnl-ins-blue:#24479B;
  --gnl-ins-ink:#14213D;
  --gnl-ins-muted:#6B7385;
  --gnl-ins-line:#E2E7F0;
  --gnl-ins-chip-line:#C9CFDA;
  --gnl-ins-green:#2F855A;      /* verde sobrio para botones */
  --gnl-ins-green-hover:#276749;
  --gnl-ins-off-bg:#E8F0FB;
  --gnl-ins-img:72px;           /* tamaño de la foto */
}

/* Lo que el script oculta queda oculto */
.gnl-ins-row [hidden]{display:none !important}


/* Botones y combo: compartidos por el listado (celular) y la página de producto */
.gnl-ins-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:38px;padding:0 14px;max-width:100%;
  border-radius:8px;border:1px solid var(--gnl-ins-green);background:var(--gnl-ins-green);color:#fff !important;
  font:inherit;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer;text-decoration:none !important;
  -webkit-tap-highlight-color:transparent;transition:background .15s,border-color .15s}
.gnl-ins-btn:hover,.gnl-ins-btn:active{background:var(--gnl-ins-green-hover);border-color:var(--gnl-ins-green-hover)}
.gnl-ins-btn[disabled]{background:#C8CDD6;border-color:#C8CDD6;cursor:not-allowed}
.gnl-ins-btn.is-busy{opacity:.75;pointer-events:none}
/* Combo recomendado (aparece al agregar) */
.gnl-ins-combo{grid-column:1 / -1;margin-top:2px}
.gnl-ins-combo-ok{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;
  background:#E7F4EC;color:var(--gnl-ins-green);font-size:12.5px;font-weight:700}
.gnl-ins-combo-box{margin-top:10px;padding:12px;border-radius:12px;background:linear-gradient(180deg,#FFF5E1 0%,#FFFAF0 100%);
  border:1px solid #F3D9A4;box-shadow:inset 3px 0 0 #E0962B}
.gnl-ins-combo-h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:#7A4A06;line-height:1.25;margin-bottom:10px}
.gnl-ins-combo-ico{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:#E0962B;color:#fff;display:grid;place-items:center}
.gnl-ins-combo-ico svg{width:14px;height:14px;fill:#fff;stroke:#fff}
.gnl-ins-x{display:flex;align-items:center;gap:10px;padding:8px;margin-top:8px;background:#fff;border:1px solid #F1E3C4;border-radius:10px;font-size:13px}
.gnl-ins-x-img{flex:0 0 44px;width:44px;height:44px;border-radius:8px;overflow:hidden;background:#F4F6FA;display:block}
.gnl-ins-x-img img{width:100%;height:100%;object-fit:contain;display:block}
.gnl-ins-x-name{flex:1 1 auto;min-width:0;color:var(--gnl-ins-ink) !important;text-decoration:none !important;line-height:1.3}
.gnl-ins-x-name b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:700}
.gnl-ins-x-name small{display:inline-block;margin-top:3px;padding:1px 7px;border-radius:6px;background:#EEF2F8;color:var(--gnl-ins-muted);font-size:11.5px}
.gnl-ins-x-right{flex:0 0 auto;display:flex;align-items:center;gap:10px;white-space:nowrap;font-weight:800}
.gnl-ins-plus{width:34px;height:34px;padding:0;border-radius:50%;border:0;background:var(--gnl-ins-blue);color:#fff;
  display:inline-grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:0 2px 6px rgba(36,71,155,.3)}
.gnl-ins-plus:active{background:#1B3780}
.gnl-ins-plus.is-busy{opacity:.6;pointer-events:none}
.gnl-ins-x-done{width:34px;display:inline-grid;place-items:center;color:var(--gnl-ins-green)}
.gnl-ins-both{width:100%;margin-top:10px;height:42px}
.gnl-ins-both-note{font-size:11.5px;color:var(--gnl-ins-muted);text-align:center;margin-top:6px}
.gnl-ins-msg{grid-column:1 / -1;font-size:12px;color:#B42318;margin-top:-4px}
.gnl-ins-btn-text{overflow:hidden;text-overflow:ellipsis}
.gnl-ins-pp-combo .gnl-ins-combo{max-width:560px;margin:4px 0 14px}
/* En la página de producto ya está el aviso nativo "Ya has agregado este producto": no se repite */
.gnl-ins-pp-combo .gnl-ins-combo-ok{display:none}
.gnl-ins-pp-combo .gnl-ins-combo-box{margin-top:0}
.gnl-ins-pp-combo:empty{display:none}

/* En computadora: todo sigue igual (la fila viene oculta desde el HTML) */

@media (max-width:767.98px){

  /* Una fila por producto y se oculta la tarjeta anterior */
  .gnl-ins-on .js-item-product.gnl-ins-item{flex:0 0 100%;max-width:100%;margin-bottom:8px}
  .gnl-ins-on .js-item-product.gnl-ins-item > .item{display:none !important}

  .gnl-ins-on .gnl-ins-row{display:grid !important;grid-template-columns:var(--gnl-ins-img) minmax(0,1fr);gap:12px;
    background:#fff;border:1px solid var(--gnl-ins-line);border-radius:12px;padding:12px;
    box-shadow:0 1px 2px rgba(20,33,61,.04);color:var(--gnl-ins-ink)}

  .gnl-ins-img{display:block;width:var(--gnl-ins-img);height:var(--gnl-ins-img);border-radius:10px;
    overflow:hidden;background:#F4F6FA}
  .gnl-ins-img img{width:100%;height:100%;object-fit:contain;display:block}

  .gnl-ins-body{min-width:0}
  .gnl-ins-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
  .gnl-ins-name{font-size:14.5px;font-weight:700;line-height:1.3;color:var(--gnl-ins-ink) !important;
    text-decoration:none !important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .gnl-ins-clients{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;font-size:11.5px;
    color:var(--gnl-ins-muted);white-space:nowrap;padding-top:2px}
  .gnl-ins-clients svg{width:14px;height:14px}

  /* Presentaciones */
  .gnl-ins-chips{display:grid;grid-template-columns:repeat(var(--gnl-ins-cols,3),minmax(0,1fr));gap:8px;margin-top:16px}
  .gnl-ins-chip{position:relative;height:36px;padding:0 4px;border:1px solid var(--gnl-ins-chip-line);border-radius:8px;
    background:#fff;color:var(--gnl-ins-ink);font:inherit;font-size:12.5px;line-height:1.1;cursor:pointer;
    white-space:nowrap;overflow:visible;-webkit-tap-highlight-color:transparent;min-width:0}
  .gnl-ins-chip-txt{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gnl-ins-chip.is-on{border-color:var(--gnl-ins-blue);box-shadow:0 0 0 1px var(--gnl-ins-blue);color:var(--gnl-ins-blue);font-weight:700}
  .gnl-ins-chip.is-out{color:#A3A9B6;text-decoration:line-through}
  .gnl-ins-chip:focus-visible{outline:2px solid var(--gnl-ins-blue);outline-offset:2px}
  .gnl-ins-tag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-size:9.5px;font-weight:700;
    padding:0 6px;border-radius:9px;background:var(--gnl-ins-blue);color:#fff;white-space:nowrap;line-height:1.6}

  .gnl-ins-more{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:600;color:var(--gnl-ins-blue) !important;text-decoration:underline !important}

  /* Precio y botón */
  .gnl-ins-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;margin-top:12px}
  .gnl-ins-price{min-width:0;flex:1 1 auto}
  .gnl-ins-compare{display:block;font-size:12px;color:var(--gnl-ins-muted)}
  .gnl-ins-now-wrap{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
  .gnl-ins-now{font-size:17px;font-weight:800;color:#000;line-height:1.2}
  .gnl-ins-off{font-size:11px;font-weight:700;padding:2px 6px;border-radius:6px;background:var(--gnl-ins-off-bg);color:var(--gnl-ins-blue)}

  .gnl-ins-form{margin:0;flex:0 0 auto}
  .gnl-ins-btn-text{overflow:hidden;text-overflow:ellipsis;max-width:46vw}
  .gnl-ins-btn-alt{flex:0 0 auto}
  .gnl-ins-btn-alt{background:#fff;color:var(--gnl-ins-green) !important}
  .gnl-ins-btn-alt:hover,.gnl-ins-btn-alt:active{background:#F0F7F3;border-color:var(--gnl-ins-green)}
}

/* ============================================================
   Fase 3 (2026-10-14) · COMPUTADORA y PÁGINA DE PRODUCTO (solo Insumos)
   ============================================================ */

/* Tarjeta en computadora: "Ver más info y presentaciones (N)" arriba de las estrellas */
@media (min-width:768px){
  .gnl-ins-on .gnl-ins-item .gnl-ins-more-d{display:inline-block !important;margin:6px 0 4px;font-size:13px;font-weight:600;
    color:var(--gnl-ins-blue);text-decoration:underline;text-underline-offset:2px}
  .gnl-ins-on .gnl-ins-item .item-link:hover .gnl-ins-more-d{color:#173B72}
  .gnl-ins-on .gnl-ins-item .gnl-ins-more-d--in{display:block !important;width:max-content;margin:6px 0 2px}
}

/* Página de producto (computadora y celular): presentaciones con el diseño del listado */
.gnl-ins-on #single-product .js-product-variants-group{padding-top:10px}
.gnl-ins-on #single-product .js-insta-variant.btn-variant{position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-width:84px;height:42px;padding:0 16px !important;margin:0 8px 14px 0;line-height:1.2 !important;vertical-align:top;border:1px solid var(--gnl-ins-chip-line);border-radius:8px;
  background:#fff;color:var(--gnl-ins-ink);font-size:14px;font-weight:500;box-shadow:none;overflow:visible;transition:border-color .15s,box-shadow .15s}
.gnl-ins-on #single-product .js-insta-variant.btn-variant .btn-variant-content{display:block;margin:0 !important;padding:0;min-height:0 !important;
  background:none;border:0;line-height:1.2 !important;color:inherit;font-weight:inherit}
.gnl-ins-on #single-product .js-insta-variant.btn-variant:hover{border-color:var(--gnl-ins-blue)}
.gnl-ins-on #single-product .js-insta-variant.btn-variant.selected{border-color:var(--gnl-ins-blue);box-shadow:0 0 0 1px var(--gnl-ins-blue);
  color:var(--gnl-ins-blue);font-weight:700;background:#fff}
.gnl-ins-on #single-product .gnl-ins-tag{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:700;
  padding:0 7px;border-radius:9px;background:var(--gnl-ins-blue);color:#fff;white-space:nowrap;line-height:1.7;pointer-events:none}

/* Botón "Agregar al carrito": verde sobrio solo en celular (en computadora se queda el verde original del tema) */
@media (max-width:767.98px){
  .gnl-ins-on #single-product .btn-add-to-cart,
  .gnl-ins-on #single-product .js-addtocart-placeholder{background:var(--gnl-ins-green) !important;border-color:var(--gnl-ins-green) !important;color:#fff !important}
  .gnl-ins-on #single-product .btn-add-to-cart:hover,
  .gnl-ins-on #single-product .btn-add-to-cart:focus{background:var(--gnl-ins-green-hover) !important;border-color:var(--gnl-ins-green-hover) !important}
}

/* Computadora · página de producto: "Llévalos juntos" en el mismo verde brillante del botón "Agregar al carrito" */
@media (min-width:768px){
  .gnl-ins-pp-combo .gnl-ins-both{background:#37D21F;border-color:#37D21F}
  .gnl-ins-pp-combo .gnl-ins-both:hover,.gnl-ins-pp-combo .gnl-ins-both:active{background:#2DB518;border-color:#2DB518}
}