/* ===========================
   SECCIÓN PRODUCTOS
=========================== */
.productos-header{
  display:flex;justify-content:space-between;align-items:center;
  background:#fff;border-bottom:1px solid #ccc;padding:10px 14px;
  position:relative;
}
.productos-header h1{font-size:20px;font-weight:700;margin:0;color:#333}
.top-actions{display:flex;align-items:center;gap:12px}

.icon-btn{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:transparent;border:none;cursor:pointer;
}
.icon-btn img{width:22px;height:22px;display:block;opacity:.9;transition:transform .15s ease}
.icon-btn:active img{transform:scale(.92)}

.search-box{
  display:flex;align-items:center;background:#fff;padding:8px 10px;border-bottom:1px solid #ccc;
  position:relative;
}
.search-box input{
  flex:1;padding:8px 36px 8px 10px;border:1px solid #ccc;border-radius:10px;font-size:14px
}
.search-box button{margin-left:8px}
.search-box button img{width:20px;height:20px}
.search-box #closeSearch{
  width:32px;height:32px;border-radius:10px;border:1px solid #ddd;background:#f7f7f7;
  font-size:18px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;
}
.clear-search{
  position:absolute;right:52px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;border:none;border-radius:8px;
  background:#e9ecf2;color:#555;font-size:16px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;opacity:.85;
}
.clear-search:hover{background:#dde3ef}

/* Menú tres puntos */
.header-menu{
  position:absolute;top:54px;right:10px;
  background:#fff;border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  display:none;flex-direction:column;min-width:180px;z-index:650;
  overflow:hidden;
}
.header-menu.show{display:flex}
.header-menu button{
  background:none;border:none;padding:10px 14px;text-align:left;
  font-size:14px;color:#222;cursor:pointer;
}
.header-menu button:hover{background:#f5f7fb}

/* ===========================
   LISTA DE PRODUCTOS
=========================== */
.product-list{
  padding:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:12px;transition:all .25s ease
}
.product-list.list-view{display:flex;flex-direction:column;gap:14px}
.product-card{
  position:relative;background:#fff;border-radius:12px;box-shadow:0 2px 5px rgba(0,0,0,.06);
  padding:10px;text-align:center;cursor:pointer;transition:transform .15s ease
}
.product-card:hover{transform:scale(1.01)}
.product-card img{width:100%;height:96px;object-fit:cover;border-radius:10px}
.product-info h4{font-size:14px;margin-top:6px;font-weight:600}
.product-info p{font-size:12px;color:#777}
.product-price{display:block;color:#007bff;font-weight:700;margin-top:6px}
.product-list.list-view .product-card{
  display:flex;align-items:center;text-align:left;gap:16px;padding:12px 14px;position:relative
}
.product-list.list-view .product-card img{width:68px;height:68px;flex-shrink:0}
.product-list.list-view .product-price{position:absolute;right:14px;bottom:10px;margin:0}
.product-list.selection-active .product-card{border:1.5px dashed #d4dbff}
.product-card.selectable .select-badge{opacity:1}
.product-card.selected{
  border-color:#4a7dff;
  box-shadow:0 0 0 2px rgba(74,125,255,.2);
}
.product-card.scan-focus{
  box-shadow:0 0 0 2px rgba(239,68,68,.35),0 10px 18px rgba(15,23,42,.18);
  transform:scale(1.02);
}

/* ===========================
   MENÚ DE OPCIONES EN TARJETA
=========================== */
.product-options{position:absolute;top:6px;right:6px}
.product-options .btn-options{background:transparent;border:none;padding:2px;cursor:pointer}
.product-options .btn-options img{width:14px;height:14px;opacity:.75;transition:opacity .15s ease,transform .15s ease}
.product-list.list-view .product-options .btn-options img{width:15px;height:15px;opacity:.7}
.product-options .btn-options:hover img{opacity:1;transform:scale(1.05)}
.options-menu{
  position:absolute;top:20px;right:0;background:#fff;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.12);
  display:none;flex-direction:column;min-width:120px;z-index:600
}
.options-menu button{
  padding:8px 10px;background:none;border:none;text-align:left;font-size:13px;color:#333;cursor:pointer
}
.options-menu button:hover{background:#f4f4f4}

/* Check de selección */
.select-badge{
  position:absolute;top:8px;left:8px;width:22px;height:22px;
  border:1.5px solid #c6cde6;border-radius:8px;
  background:#fff;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:#4a7dff;opacity:0;transition:.15s ease;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.select-badge::after{
  content:"";
}
.product-card.selected .select-badge{
  background:#4a7dff;
  border-color:#4a7dff;
  color:#fff;
}
.product-card.selected .select-badge::after{
  content:"✓";
  font-weight:700;
  line-height:1;
}

/* ===========================
   MODAL FORMULARIO
=========================== */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(3px);
  display:none;justify-content:center;align-items:center;z-index:600;
  overflow:hidden;padding:0 14px
}
.modal.show{display:flex}
.modal-content{
  background:#fff;
  border-radius:14px;
  width:90%;
  max-width:420px;
  max-height:90vh;
  overflow-y:auto;
  padding:16px 15px;
  position:relative;
  animation:modalIn .2s ease;
  -webkit-overflow-scrolling:touch;

  /* 🔽 Ajuste exacto del margen visible a ambos lados */
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
form input,
form textarea {
  width: 95% !important;
}

@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.close-btn{position:absolute;right:10px;top:6px;font-size:22px;cursor:pointer}

/* ===========================
   GALERÍA DE IMÁGENES
=========================== */
.image-gallery{
  display:flex;overflow-x:auto;gap:10px;
  padding-bottom:10px;margin-bottom:15px;justify-content:flex-start;
  -webkit-overflow-scrolling:touch;scroll-behavior:smooth; /* sin snap */
}
.image-gallery::-webkit-scrollbar{height:6px}
.image-gallery::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px}
.img-box{
  position:relative;flex:0 0 70%;max-width:260px; /* sin scroll-snap-align */
}
.img-box img{
  width:100%;aspect-ratio:1/1;border-radius:12px;border:1.5px solid #ddd;object-fit:cover
}
.img-box.uploading::after{
  content:"Subiendo...";
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.72);
  color:#111827;font-size:14px;font-weight:700;
  border-radius:12px;
}
.img-box.uploading .remove-img{display:none;}
.remove-img{
  position:absolute;top:4px;right:6px;width:22px;height:22px;border:none;
  border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:14px;
  cursor:pointer;line-height:22px;text-align:center;opacity:.8;transition:.2s
}
.remove-img:hover{opacity:1;background:rgba(255,0,0,.7)}

/* Cuadro “+” dentro del carrusel */
.add-photo-btn{
  flex:0 0 70%;max-width:260px;aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  border:1.5px dashed #aaa;border-radius:12px;background:#fafafa;
  cursor:pointer;transition:all .2s ease;
}
.add-photo-btn:hover{background:#f0f0f0}
.add-photo-btn img{width:40px;height:40px;opacity:.7}
.add-photo-btn span{display:none}

/* ===========================
   CAMPOS FORMULARIO PRODUCTOS (estilo flotante)
=========================== */
#productFormModal .field{
  position:relative;
  margin-bottom:16px;
  width:100%;
}
#productFormModal .field input,
#productFormModal .field textarea,
#productFormModal .field select{
  width:100%;
  padding:18px 14px 10px;
  font-size:15px;
  border-radius:14px;
  border:1.6px solid #d1d5db;
  background:#f9fafb;
  transition:border-color .2s, background-color .2s;
  outline:none;
  box-sizing:border-box;
}
#productFormModal .field textarea{
  min-height:90px;
  resize:none;
}
#productFormModal .field input:focus,
#productFormModal .field textarea:focus,
#productFormModal .field select:focus{
  border-color:#4f46e5;
  background:#fff;
}
#productFormModal .field label{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  font-size:15px;
  color:#6b7280;
  pointer-events:none;
  background:transparent;
  padding:0 4px;
  transition:all .18s ease;
}
#productFormModal .field input:not(:placeholder-shown)+label,
#productFormModal .field textarea:not(:placeholder-shown)+label,
#productFormModal .field select.filled+label,
#productFormModal .field input:focus+label,
#productFormModal .field textarea:focus+label,
#productFormModal .field select:focus+label{
  top:-7px;
  left:12px;
  background:#fff;
  font-size:12px;
  color:#4f46e5;
  transform:none;
  padding:0 6px;
}
#productFormModal .field select + label{
  top:-7px;
  left:12px;
  background:#fff;
  font-size:12px;
  color:#6b7280;
  transform:none;
  padding:0 6px;
}

.btn-save{
  width:100%;padding:11px;background:#007bff;color:#fff;border-radius:10px;border:none;font-weight:700;font-size:15px;cursor:pointer
}
.btn-save:active{transform:scale(.99)}
.hidden{display:none!important}

/* Barra de selección múltiple */
.selection-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;background:#fff;border-bottom:1px solid #e5e8f0;
  padding:10px 14px;
}
.selection-bar .selection-text{font-weight:600;color:#2c3e50}
.selection-actions{display:flex;gap:8px}
.selection-actions button{
  padding:8px 12px;border-radius:10px;border:none;cursor:pointer;font-weight:600
}
.selection-actions .btn-secondary{background:#eef1f7;color:#2c3e50}
.selection-actions .btn-danger{background:#ff6b6b;color:#fff}
.selection-actions button:disabled{opacity:.4;cursor:not-allowed}

/* Overlay para código */
.scanner-overlay.product-scanner{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;
  z-index:1200;padding:14px;
}
.scanner-overlay.product-scanner.hidden{display:none}
.scanner-overlay.product-scanner .scanner-box{
  background:#fff;border-radius:12px;padding:16px;
  width:100%;max-width:380px;box-shadow:0 10px 28px rgba(0,0,0,.18);
}
.scanner-overlay.product-scanner .scanner-box h3{margin:0 0 6px;font-size:18px}
.scanner-overlay.product-scanner .scanner-help{margin:0 0 12px;color:#666;font-size:13px}
.scanner-overlay.product-scanner .scanner-video-wrap{
  background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;
  padding:8px;margin-bottom:10px;
}
.scanner-overlay.product-scanner .scanner-video{width:100%;max-height:220px;border-radius:10px;background:#000;}
.scanner-overlay.product-scanner .scanner-video-actions{display:flex;gap:8px;margin-top:6px;}
.scanner-overlay.product-scanner .scanner-video-actions button{
  padding:8px 10px;border-radius:10px;border:none;cursor:pointer;font-weight:700;
}
.scanner-overlay.product-scanner .scanner-video-actions .ghost{background:#eef2ff;color:#1f2937;}
.scanner-overlay.product-scanner .scanner-input{
  width:100%;padding:10px;border-radius:10px;border:1px solid #cdd4e1;
  font-size:15px;margin-bottom:12px;
}
.scanner-overlay.product-scanner .scanner-actions{display:flex;justify-content:flex-end;gap:10px}
.scanner-overlay.product-scanner .scanner-actions button{
  padding:9px 12px;border-radius:10px;border:none;cursor:pointer;font-weight:600
}
.scanner-overlay.product-scanner .scanner-actions [data-action="scan-confirm"]{background:#007bff;color:#fff}
.scanner-overlay.product-scanner .scanner-actions [data-action="scan-close"]{background:#eef1f7;color:#2c3e50}