.bolas-wrap{ font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; max-width:1600px; margin:0 auto; padding:18px 16px; }
.bolas-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:14px; flex-wrap:wrap; }
.bolas-title{ font-size:1.2rem; font-weight:600; }
.bolas-meta{ margin:10px 0 14px; color:#6b7280; font-size:13px; }
.bolas-filters{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.bolas-filters label{ display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:700; }
.bolas-filters select{ height:42px; padding:0 12px; border-radius:10px; border:1px solid #d1d5db; background:#fff; }
.bolas-filters button{ height:42px; padding:0 14px; border-radius:999px; border:0; background:#2d3716; color:#fff; font-weight:800; cursor:pointer; }
.bolas-reset{ height:42px; display:inline-flex; align-items:center; padding:0 10px; color:#2d3716; text-decoration:none; font-weight:700; }
.bolas-reset:hover{ text-decoration:underline; }

.bolas-table-wrap{ overflow:auto; border:1px solid #e5e7eb; border-radius:14px; background:#fff; box-shadow:0 6px 22px rgba(0,0,0,.06); }
.bolas-table{ width:100%; border-collapse:separate; border-spacing:0; min-width:760px; }
.bolas-table thead th{ text-align:left; padding:14px 16px; background:#4c5538; color:#fff; font-size:13px; letter-spacing:.02em; text-transform:uppercase; }
.bolas-table td{ padding:14px 16px; border-top:1px solid #eef2f7; vertical-align:middle; }
.bolas-product{ display:flex; align-items:center; gap:12px; }
.bolas-product img{ width:170px; height:170px; border-radius:12px; object-fit:cover; border:1px solid #e5e7eb; background:#fff; cursor: pointer; }
.bolas-name{ font-weight:600; color:#111827; }
.bolas-col-price{ white-space:nowrap; font-weight:500; }
.bolas-stock-in{ color:#15803d; font-weight:800; }
.bolas-stock-out{ color:#b91c1c; font-weight:800; }
.bolas-btn{ display:inline-flex; align-items:center; justify-content:center; background:#4c5538; color:#fff; text-decoration:none;
  padding:10px 16px; border-radius:999px; font-weight:500; }
.bolas-btn:hover{ background:#3f472d; }
.bolas-muted{ color:#9ca3af; font-weight:700; }
.bolas-empty{ padding:18px; border:1px dashed #d1d5db; border-radius:14px; background:#fafafa; }
.bolas-desc{ color:#374151; font-size:14px; max-width: 70ch; }
.bolas-grade{ white-space:nowrap; }
.bolas-pill{
  display:inline-flex; align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:#eef2e6;
  border:1px solid #d9ddcf;
  font-weight:800;
  color:#2d3716;
  font-size:13px;
}
.bolas-variation-select{
  height:42px; padding:0 12px; border-radius:10px;
  border:1px solid #d1d5db; background:#fff; font-weight:500;
  font-size: 0.85rem;
}
.bolas-btn.is-disabled{ opacity:.6; pointer-events:none; }


/* Texto dentro de la celda Producto (título + descripción) */
.bolas-prod-text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.bolas-desc-under{ color:#374151; font-size:13px; line-height:1.25; }

/* Cantidad */
.bolas-col-qty{ white-space:nowrap; }
.bolas-qty-select{
  height:42px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid #d1d5db;
  font-weight:500;
  min-width:72px;
  text-align:center;
  background:#fff;
  font-size: 0.85rem;
}

/* Avisos (toast) */
.bolas-notice-wrap{
  position:fixed;
  top:20px;
  right:20px;
  z-index:99999;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.bolas-notice{
  background:#2d3716;
  color:#fff;
  padding:14px 18px;
  border-radius:12px;
  font-weight:800;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  opacity:0;
  transform:translateY(-10px);
  transition:all .25s ease;
  max-width:min(420px, 92vw);
}

.bolas-notice.show{ opacity:1; transform:translateY(0); }
.bolas-notice-error{ background:#b91c1c; }

/* Estado cargando */
.bolas-btn.is-loading{ opacity:.75; pointer-events:none; }

/* Flecha personalizada para selects */
.bolas-filters select,
.bolas-variation-select,
.bolas-qty-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;

  padding-right: 36px; /* espacio para la flecha */
}

/* Lightbox imagen producto */
.bolas-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.bolas-lightbox.show {
  opacity: 1;
  pointer-events: auto;
}

.bolas-lightbox img {
  width: 200px;
  max-height: 200px;
  border-radius: 12px;
  background: #fff;
  padding: 8px;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}

.bolas-lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 32px;
  color: #fff;
  cursor: pointer;
  font-weight: 300;
  line-height: 1;
}