/**
 * DESIGN REYES - Sistema de Protección de Imágenes Pro
 * v2.0 - Protección multicapa para imágenes preview
 */

/* ═══════════════════════════════════════════════════════════════
   CONTENEDOR DE IMAGEN PROTEGIDA
   ═══════════════════════════════════════════════════════════════ */

/* Wrapper principal que contiene la imagen protegida */
.dr-protected-image {
  position: relative;
  display: block;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(20, 10, 35, 0.9), rgba(15, 5, 25, 0.95));
}

/* Overlay transparente protector - impide acceso directo a la imagen */
.dr-protected-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: transparent;
  /* Evita que se pueda seleccionar o interactuar con la imagen real */
  pointer-events: auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Patrón de protección sutil (opcional) */
.dr-protected-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  /* Patrón de puntos casi invisible */
  background-image: radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.03) 1px, transparent 1px);
  background-size: 4px 4px;
}

/* Mostrar patrón al intentar interactuar */
.dr-protected-image:active::after {
  opacity: 1;
}

/* La imagen real dentro del contenedor */
.dr-protected-image img,
.dr-protected-image .dr-secure-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  -webkit-touch-callout: none;
}

/* ═══════════════════════════════════════════════════════════════
   IMAGEN COMO BACKGROUND (MÁXIMA PROTECCIÓN)
   ═══════════════════════════════════════════════════════════════ */

/* Contenedor que usa background-image en lugar de <img> */
.dr-bg-protected {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: rgba(15, 5, 25, 0.8);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Capa de protección sobre el background */
.dr-bg-protected::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  background: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Segunda capa anti-inspector */
.dr-bg-protected::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  /* Gradiente casi invisible que dificulta extracción */
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.001) 0%,
    rgba(255, 255, 255, 0.001) 50%,
    rgba(0, 0, 0, 0.001) 100%
  );
}

/* ═══════════════════════════════════════════════════════════════
   TARJETAS DEL CATÁLOGO - PROTECCIÓN ESPECÍFICA
   ═══════════════════════════════════════════════════════════════ */

/* Wrapper de imagen en tarjetas de catálogo */
.catalog-card .card-image,
.catalog-card .design-card-img-wrapper {
  position: relative;
  overflow: hidden;
}

/* Overlay protector en tarjetas */
.catalog-card .card-image::before,
.catalog-card .design-card-img-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  background: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.catalog-card .card-image img,
.catalog-card .design-card-img-wrapper img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* ═══════════════════════════════════════════════════════════════
   PÁGINA DE PRODUCTO - PROTECCIÓN ESPECÍFICA
   ═══════════════════════════════════════════════════════════════ */

/* Frame de imagen principal en producto */
.dr-product-image-frame {
  position: relative;
  overflow: hidden;
}

/* Overlay protector en producto */
.dr-product-image-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.dr-product-image-frame img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* ═══════════════════════════════════════════════════════════════
   BLOQUEOS GLOBALES PARA IMÁGENES
   ═══════════════════════════════════════════════════════════════ */

/* Todas las imágenes del sitio (usuarios no-admin) */
body:not(.dr-admin) img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

/* Re-habilitar clicks en links con imágenes */
body:not(.dr-admin) a img {
  pointer-events: auto;
}

/* Imágenes dentro de contenedores protegidos - forzar bloqueo */
.dr-protected-image img,
.dr-bg-protected img,
.card-image img,
.design-card-img-wrapper img,
.dr-product-image-frame img {
  pointer-events: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  user-select: none !important;
  user-select: none !important;
  user-select: none !important;
  user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  -webkit-touch-callout: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   PROTECCIÓN MÓVIL (iOS/Android)
   ═══════════════════════════════════════════════════════════════ */

@media (pointer: coarse) {
  /* Dispositivos táctiles */
  .dr-protected-image,
  .dr-bg-protected,
  .card-image,
  .design-card-img-wrapper,
  .dr-product-image-frame {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    touch-action: manipulation;
  }
  
  .dr-protected-image img,
  .dr-bg-protected img,
  .card-image img,
  .dr-product-image-frame img {
    -webkit-touch-callout: none !important;
    touch-action: none;
  }
  
  /* Prevenir menú de contexto en móvil */
  .dr-protected-image::before,
  .dr-bg-protected::before,
  .card-image::before,
  .dr-product-image-frame::before {
    touch-action: manipulation;
  }
}

/* ═══════════════════════════════════════════════════════════════
   INDICADOR VISUAL DE PROTECCIÓN (SUTIL)
   ═══════════════════════════════════════════════════════════════ */

/* Badge de contenido protegido (opcional) */
.dr-protection-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 25;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dr-protected-image:hover .dr-protection-badge,
.dr-product-image-frame:hover .dr-protection-badge {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   ANTI-INSPECCIÓN CSS
   ═══════════════════════════════════════════════════════════════ */

/* Ofuscar atributos en DevTools */
/* El src real se oculta en data attribute encriptado */

/* Ocultar en impresión */
@media print {
  .dr-protected-image,
  .dr-bg-protected,
  .card-image,
  .dr-product-image-frame,
  img {
    visibility: hidden !important;
    display: none !important;
  }
  
  .dr-protected-image::after,
  .dr-bg-protected::after {
    content: '[Imagen protegida - No disponible para impresión]';
    display: block !important;
    visibility: visible !important;
    padding: 50px;
    text-align: center;
    color: #7c3aed;
    font-size: 14px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN OVERRIDE - Admins pueden ver todo normal
   ═══════════════════════════════════════════════════════════════ */

body.dr-admin .dr-protected-image::before,
body.dr-admin .dr-bg-protected::before,
body.dr-admin .card-image::before,
body.dr-admin .dr-product-image-frame::before {
  display: none !important;
}

body.dr-admin img {
  pointer-events: auto !important;
  -webkit-user-select: auto !important;
  user-select: auto !important;
  -webkit-user-drag: auto !important;
  -webkit-touch-callout: default !important;
}