/* ---------- Búsqueda por imagen: botón flotante (cuadrado, no redondo) ---------- */
#scImgBtn{
  position:fixed; right:18px; bottom:88px; z-index:8500;
  width:56px; height:56px; border-radius:16px; padding:0;
  background:#7B0A0C; color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(58,5,6,.28);
  transition:background .2s ease, transform .2s ease;
}
#scImgBtn{ display:none !important; }
#scImgBtn:hover{ background:#5C0607; transform:translateY(-2px); }
#scImgBtn svg{ width:24px; height:24px; flex:none; }
@media(max-width:900px){
  #scImgBtn{ right:14px; bottom:140px; width:48px; height:48px; border-radius:14px; }
  #scImgBtn svg{ width:20px; height:20px; }
}

/* ---------- Modal ---------- */
#scImgModal{ position:fixed; inset:0; z-index:9600; display:none; }
#scImgModal.is-open{ display:block; }
#scImgModal .scim__backdrop{ position:absolute; inset:0; background:rgba(30,10,8,.55); }
#scImgModal .scim__panel{
  position:relative; max-width:860px; width:calc(100% - 32px); margin:5vh auto; background:#fff; border-radius:16px;
  max-height:90vh; overflow:auto; box-shadow:0 30px 80px rgba(0,0,0,.35);
}
#scImgModal .scim__head{
  position:sticky; top:0; background:#fff; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid #EEE2DA;
}
#scImgModal .scim__head h3{ font-family:var(--font-display); color:var(--guinda); font-size:22px; margin:0; letter-spacing:.01em; }
#scImgModal .scim__close{
  padding:6px; border-radius:8px; background:none; cursor:pointer; color:#8a8a8a; display:flex;
}
#scImgModal .scim__close svg{ width:20px; height:20px; flex:none; }
#scImgModal .scim__close:hover{ color:#333; }
#scImgModal .scim__body{ padding:24px; }

#scImgModal .scim__drop{
  border:2px dashed #D8C6BA; border-radius:14px; padding:48px 24px; text-align:center;
  color:#7c6b62; cursor:pointer; transition:border-color .2s ease, background .2s ease;
}
#scImgModal .scim__drop.is-drag{ border-color:var(--guinda); background:#FBF3EE; }
#scImgModal .scim__drop svg{ width:40px; height:40px; color:#b7a79c; margin-bottom:14px; }
#scImgModal .scim__drop p{ margin:0 0 18px; font-size:15px; }
#scImgModal .scim__upload-btn{
  display:inline-flex; align-items:center; gap:8px; background:#1c1c1c; color:#fff;
  border-radius:999px; padding:12px 22px; font-weight:700; font-size:14px; cursor:pointer;
}
#scImgModal .scim__upload-btn:hover{ background:#000; }

#scImgModal .scim__examples{ margin-top:30px; text-align:center; }
#scImgModal .scim__examples-label{
  display:block; font-size:12px; color:#9a897f; margin-bottom:16px;
  text-transform:uppercase; letter-spacing:.14em; font-weight:700;
}
#scImgModal .scim__examples-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
@media(max-width:600px){ #scImgModal .scim__examples-grid{ grid-template-columns:repeat(3,1fr); } }
#scImgModal .scim__example{
  aspect-ratio:1; border-radius:12px; overflow:hidden; border:1px solid #EEE2DA; cursor:pointer;
  background:#FAF5F0; padding:8px;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s ease;
}
#scImgModal .scim__example img{ width:100%; height:100%; object-fit:contain; display:block; }
#scImgModal .scim__example:hover{ border-color:var(--guinda); }

/* ---------- Resultados ---------- */
#scImgModal .scim__results{ display:grid; grid-template-columns:220px 1fr; gap:28px; }
@media(max-width:700px){ #scImgModal .scim__results{ grid-template-columns:1fr; } }
#scImgModal .scim__query{ text-align:center; }
#scImgModal .scim__query img{ width:100%; border-radius:12px; border:1px solid #EEE2DA; display:block; object-fit:cover; aspect-ratio:1; }
#scImgModal .scim__requery-btn{
  margin-top:14px; width:100%; background:#1c1c1c; color:#fff; border-radius:10px;
  padding:12px; font-weight:700; font-size:13px; cursor:pointer;
}
#scImgModal .scim__requery-btn:hover{ background:#000; }
#scImgModal .scim__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:700px){ #scImgModal .scim__grid{ grid-template-columns:repeat(2,1fr); margin-top:20px; } }
#scImgModal .scim__card{ display:block; text-decoration:none; color:inherit; border:1px solid #EEE2DA; border-radius:12px; overflow:hidden; transition:box-shadow .2s ease, transform .2s ease; }
#scImgModal .scim__card:hover{ box-shadow:0 8px 20px rgba(0,0,0,.1); transform:translateY(-2px); }
#scImgModal .scim__card img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; }
#scImgModal .scim__card-body{ padding:12px; }
#scImgModal .scim__card-name{ font-size:13px; font-weight:700; color:#2b2b2b; line-height:1.3; margin:0 0 6px; }
#scImgModal .scim__card-price{ font-size:14px; color:var(--guinda); font-weight:700; }
#scImgModal .scim__loading, #scImgModal .scim__empty{ text-align:center; padding:60px 20px; color:#7c6b62; }
#scImgModal .scim__loading svg{ animation:scim-spin 1s linear infinite; width:32px; height:32px; margin-bottom:12px; color:var(--guinda); }
@keyframes scim-spin{ to{ transform:rotate(360deg); } }