/* ══════════════════════════════════════════════════════════════════════════════
   producto.css — Página individual de producto
   Principio: información clara, acción fácil, venta rápida.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Breadcrumb / volver ─────────────────────────────────────────────────────── */
.producto-nav {
  padding: 12px 0;
  font-size: .85rem;
  color: var(--color-text-muted);
}
.producto-nav a {
  color: var(--color-primary);
  font-weight: 500;
}
.producto-nav a:hover { text-decoration: underline; }
.producto-nav span { margin: 0 6px; }

/* ── Layout principal ────────────────────────────────────────────────────────── */
.producto-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  padding: 0 0 60px;
  align-items: start;
}

/* ── Columna izquierda: galería ──────────────────────────────────────────────── */
.galeria {
  position: sticky;
  top: 80px;
}
/* ── Slider wrapper ──────────────────────────────────────────────────────────── */
.galeria-slider-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.gal-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 10;
  width: 36px; height: 36px;
  background: rgba(255,255,255,.92);
  border: none; border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  font-size: 1.4rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #1a1a1a;
  transition: background .15s;
}
.gal-nav:hover { background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.gal-prev { left: 8px; }
.gal-next { right: 8px; }
.gal-counter {
  position: absolute;
  bottom: 10px; right: 12px;
  background: rgba(0,0,0,.5);
  color: #fff; font-size: .72rem; font-weight: 600;
  padding: 3px 10px; border-radius: 20px;
  pointer-events: none; display: none;
}

/* ── Track (viewport del carrusel) ──────────────────────────────────────────── */
.galeria-principal {
  background: #f5f5f5;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--color-border);
  position: relative;
  cursor: zoom-in;
  flex: 1;
}
.galeria-principal img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  pointer-events: none;
}
.sin-imagen-estado {
  display: none;            /* JS lo activa si falla la imagen */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 30px;
  text-align: center;
  color: var(--color-text-muted);
}
.sin-imagen-estado svg { margin-bottom: 12px; opacity: .4; }
.sin-imagen-estado p { font-size: .9rem; margin-bottom: 16px; }

.galeria-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.galeria-thumb {
  width: 68px;
  height: 68px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  background: #f0f0f0;
  flex-shrink: 0;
}
.galeria-thumb.active { border-color: var(--color-primary); }
.galeria-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Zoom overlay */
.zoom-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.9);
  z-index: 500;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.zoom-overlay.active { display: flex; }
.zoom-overlay img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: var(--radius);
}
.zoom-cerrar {
  position: absolute;
  top: 16px;
  right: 20px;
  color: #fff;
  font-size: 2rem;
  background: none;
  border: none;
  line-height: 1;
  cursor: pointer;
  opacity: .8;
}
.zoom-cerrar:hover { opacity: 1; }

/* ── Columna derecha: info ───────────────────────────────────────────────────── */
.producto-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.producto-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.producto-categoria {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--color-text-muted);
  background: var(--color-bg);
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
}
.producto-sku {
  font-size: .78rem;
  color: var(--color-text-muted);
}

.producto-nombre {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
}

.producto-precio {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.producto-estado-wrap {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── CTAs ────────────────────────────────────────────────────────────────────── */
.producto-ctas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.btn-wa-producto {
  background: var(--color-wa);
  color: #fff;
  padding: 15px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius);
  text-align: center;
  display: block;
  border: none;
}
.btn-wa-producto:hover { background: var(--color-wa-dk); }
.btn-fotos-producto {
  background: #fff;
  color: var(--color-wa);
  border: 2px solid var(--color-wa);
  padding: 12px;
  font-size: .9rem;
  font-weight: 600;
  border-radius: var(--radius);
  text-align: center;
  display: block;
}
.btn-fotos-producto:hover { background: #f0fdf4; }

/* ── Compartir ───────────────────────────────────────────────────────────────── */
.compartir-wrap {
  position: relative;
}
.compartir-dropdown {
  display: none;
  flex-direction: column;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  overflow: hidden;
  z-index: 50;
}
.compartir-dropdown-open { display: flex; }
.compartir-opcion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  text-decoration: none;
}
.compartir-opcion:hover { background: #f5f5f5; }
.compartir-wa   { color: #16a34a; border-bottom: 1px solid var(--color-border); }
.compartir-copy { color: var(--color-text); }

/* ── Botón compartir ─────────────────────────────────────────────────────────── */
.btn-compartir {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px;
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  background: #2563eb;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s, opacity .15s;
  letter-spacing: .2px;
}
.btn-compartir:hover  { background: #1d4ed8; }
.btn-compartir:active { opacity: .85; }
.btn-compartir:disabled {
  background: #059669;
  cursor: default;
}

/* ── Zona de confianza / info comercial ──────────────────────────────────────── */
.info-comercial {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 6px;
}
.info-comercial-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 16px;
  border-bottom: 1px solid var(--color-border);
}
.info-comercial-item:last-child { border-bottom: none; }
.info-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  margin-top: 1px;
}
.info-texto strong {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 1px;
}
.info-texto span {
  font-size: .8rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* ── Zona de productos relacionados (placeholder) ────────────────────────────── */
.relacionados {
  padding: 36px 0 20px;
  border-top: 1px solid var(--color-border);
}
.relacionados-titulo {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
}

/* ── Sticky CTA móvil ────────────────────────────────────────────────────────── */
.sticky-cta-mobile {
  display: none;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .producto-layout {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-bottom: 100px; /* espacio para sticky bar */
  }
  .galeria { position: static; }
  .galeria-principal { aspect-ratio: 4 / 3; }
  .galeria-thumb { width: 58px; height: 58px; }
  .producto-nombre { font-size: 1.2rem; }
  .producto-precio { font-size: 1.6rem; }
  .btn-wa-producto { font-size: .95rem; padding: 13px; }

  /* Sticky CTA en móvil */
  .sticky-cta-mobile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--color-border);
    padding: 10px 16px;
    z-index: 150;
    box-shadow: 0 -2px 10px rgba(0,0,0,.08);
  }
  /* Ocultar CTAs inline en móvil — solo se usan los sticky */
  .producto-ctas { display: none; }
}
@media (min-width: 769px) {
  .sticky-cta-mobile { display: none !important; }
}

/* ── Panel Admin en producto.php ─────────────────────────────────────────────── */
.panel-admin-producto {
  background: #111827;
  color: #d1d5db;
  padding: 28px 0 48px;
  margin-top: 0;
  border-top: 3px solid #f97316;
}
.pap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.pap-title {
  font-size: 1rem;
  font-weight: 700;
  color: #f97316;
  letter-spacing: .3px;
}
.pap-link {
  font-size: .82rem;
  color: #9ca3af;
}
.pap-link:hover { color: #fff; }

.pap-alert {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: .87rem;
  margin-bottom: 16px;
}
.pap-alert-ok    { background: #14532d; color: #bbf7d0; }
.pap-alert-error { background: #7f1d1d; color: #fecaca; }

.pap-card {
  background: #1f2937;
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.pap-card-title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: #9ca3af;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pap-badge {
  background: #374151;
  color: #d1d5db;
  font-size: .7rem;
  padding: 2px 7px;
  border-radius: 20px;
  font-weight: 600;
}

/* Precios */
.pap-precios {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.pap-precio-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pap-precio-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #6b7280;
}
.pap-precio-val {
  font-size: 1.3rem;
  font-weight: 700;
  color: #f3f4f6;
}
.pap-precio-val small {
  font-size: .75rem;
  font-weight: 500;
  color: #9ca3af;
}
.pap-costo { color: #fbbf24; }

/* Fotos grid */
.pap-fotos-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.pap-slot {
  background: #111827;
  border: 1px solid #374151;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pap-slot-ok    { border-color: #374151; }
.pap-slot-empty { border-color: #374151; border-style: dashed; opacity: .7; }

.pap-slot-label {
  font-size: .72rem;
  font-weight: 600;
  color: #9ca3af;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pap-slot-kb {
  font-size: .65rem;
  color: #6b7280;
}

.pap-slot-thumb {
  aspect-ratio: 1 / 1;
  background: #0f172a;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.pap-slot-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pap-slot-remota {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: .6rem;
  background: rgba(0,0,0,.6);
  color: #9ca3af;
  padding: 1px 5px;
  border-radius: 3px;
}

.pap-form { display: flex; }
.pap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
  border: none;
  width: 100%;
  text-align: center;
}
.pap-btn-outline {
  background: transparent;
  border: 1px solid #4b5563;
  color: #d1d5db;
}
.pap-btn-outline:hover { border-color: #9ca3af; color: #fff; }
.pap-btn-danger {
  background: #7f1d1d;
  color: #fecaca;
}
.pap-btn-danger:hover { background: #991b1b; }

.pap-hint {
  font-size: .7rem;
  color: #4b5563;
  margin-top: 12px;
  text-align: center;
}

@media (max-width: 900px) {
  .pap-fotos-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
  .pap-fotos-grid { grid-template-columns: repeat(2, 1fr); }
  .pap-precios { gap: 16px; }
}