/**
/* * DESIGN REYES - Protección contra Capturas de Pantalla en Móviles */
/* * v1.0 - Sistema multicapa para prevenir capturas no autorizadas */
/* * */
 * IMPORTANTE: No existe una forma 100% efectiva de prevenir capturas
/* * en navegadores web, pero esta solución implementa múltiples capas */
/* * para dificultar la captura y añadir marcas visibles. */
 */

/* ═══════════════════════════════════════════════════════════════
/* VARIABLES DE CONFIGURACIÓN */
   ═══════════════════════════════════════════════════════════════ */
:root {
  --watermark-opacity: 0.08;
  --watermark-size: 140px;
  --watermark-color: rgba(124, 58, 237, 0.12);
  --protection-layer-bg: rgba(124, 58, 237, 0.02);
}

/* ═══════════════════════════════════════════════════════════════
/* META TAG PARA BLOQUEO DE CAPTURAS (iOS/Android) */
   Nota: Debe añadirse en el HTML <head>
/* <meta name="apple-mobile-web-app-capable" content="yes"> */
/* <meta name="mobile-web-app-capable" content="yes"> */
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
/* MARCA DE AGUA DINÁMICA - SOLO DISPOSITIVOS MÓVILES */
   ═══════════════════════════════════════════════════════════════ */

@media only screen and (max-width: 768px) {
  
  /* Contenedor principal de marca de agua repetida */
  body:not(.dr-admin)::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999998;
    pointer-events: none;
    background-image: 
/* repeating-linear-gradient( */
45deg,
transparent,
transparent 200px,
var(--watermark-color) 200px,
/* var(--watermark-color) 201px */
      );
    opacity: var(--watermark-opacity);
    mix-blend-mode: overlay;
  }
  
  /* Segunda capa de marca de agua con texto */
  body:not(.dr-admin)::after {
    content: 'DESIGN REYES · DESIGN REYES · DESIGN REYES · DESIGN REYES · DESIGN REYES · DESIGN REYES · DESIGN REYES · DESIGN REYES · DESIGN REYES · ';
    position: fixed;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    z-index: 999997;
    pointer-events: none;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--watermark-color);
    opacity: calc(var(--watermark-opacity) * 1.5);
    transform: rotate(-30deg);
    line-height: 80px;
    letter-spacing: 20px;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
    text-shadow: 
0 0 10px rgba(124, 58, 237, 0.3),
      0 0 20px rgba(124, 58, 237, 0.2);
  }
  
  /* ═══════════════════════════════════════════════════════════════
/* CAPA DE PROTECCIÓN EN IMÁGENES DE CATÁLOGO */
     ═══════════════════════════════════════════════════════════════ */
  
  /* Marca de agua específica en cada imagen de producto */
  .catalog-card:not(.dr-admin) .card-image::after,
  .design-card:not(.dr-admin) .design-card-img-wrapper::after {
    content: 'DESIGN REYES';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-25deg);
    z-index: 20;
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.06);
    text-shadow: 
0 0 30px rgba(124, 58, 237, 0.4),
      0 0 60px rgba(168, 85, 247, 0.3);
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: 4px;
    text-transform: uppercase;
  }
  
  /* ═══════════════════════════════════════════════════════════════
/* PROTECCIÓN EN PÁGINA DE PRODUCTO */
     ═══════════════════════════════════════════════════════════════ */
  
  /* Marca de agua grande en imagen principal del producto */
  .dr-product-image-frame:not(.dr-admin)::after {
    content: 'DESIGN REYES';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    z-index: 25;
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.08);
    text-shadow: 
0 0 40px rgba(124, 58, 237, 0.5),
0 0 80px rgba(168, 85, 247, 0.4),
      2px 2px 4px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: 8px;
    text-transform: uppercase;
  }
  
  /* ═══════════════════════════════════════════════════════════════
/* BLOQUEO DE GESTOS TÁCTILES PARA CAPTURA */
     ═══════════════════════════════════════════════════════════════ */
  
  /* Prevenir gestos de captura (mantener presionado en imágenes) */
  body:not(.dr-admin) img,
  body:not(.dr-admin) .dr-protected-image,
  body:not(.dr-admin) .dr-bg-protected,
  body:not(.dr-admin) .card-image,
  body:not(.dr-admin) .design-card-img-wrapper,
  body:not(.dr-admin) .dr-product-image-frame {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  /* Deshabilitar el menú contextual móvil en imágenes */
  body:not(.dr-admin) img {
    pointer-events: none !important;
  }
  
  /* Reactivar interacciones para enlaces y botones */
  body:not(.dr-admin) a,
  body:not(.dr-admin) button,
  body:not(.dr-admin) input,
  body:not(.dr-admin) select,
  body:not(.dr-admin) textarea {
    pointer-events: auto !important;
    -webkit-user-select: text !important;
    user-select: text !important;
  }
  
  /* ═══════════════════════════════════════════════════════════════
/* PATRÓN DE INTERFERENCIA EN CAPTURAS */
     ═══════════════════════════════════════════════════════════════ */
  
  /* Patrón casi invisible que se hace visible en capturas */
  .dr-protected-image:not(.dr-admin)::before,
  .dr-bg-protected:not(.dr-admin)::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 15;
    background-image: 
/* radial-gradient( */
circle at 20% 30%,
rgba(124, 58, 237, 0.04) 0%,
/* transparent 40% */
),
/* radial-gradient( */
circle at 80% 70%,
rgba(168, 85, 247, 0.03) 0%,
/* transparent 40% */
),
/* repeating-linear-gradient( */
0deg,
transparent,
transparent 2px,
rgba(124, 58, 237, 0.01) 2px,
/* rgba(124, 58, 237, 0.01) 4px */
      );
    pointer-events: none;
    mix-blend-mode: screen;
  }
  
  /* ═══════════════════════════════════════════════════════════════
/* DETECTOR DE CAPTURAS (CAMBIO DE VISIBILIDAD) */
     ═══════════════════════════════════════════════════════════════ */
  
  /* Cuando la página pierde foco (posible captura), aumentar marca */
  body:not(.dr-admin).dr-screenshot-detected::before {
    opacity: calc(var(--watermark-opacity) * 3) !important;
    transition: opacity 0.1s ease-out;
  }
  
  body:not(.dr-admin).dr-screenshot-detected::after {
    opacity: calc(var(--watermark-opacity) * 4) !important;
    font-size: 18px !important;
    transition: all 0.1s ease-out;
  }
  
  /* ═══════════════════════════════════════════════════════════════
/* INFORMACIÓN DE USUARIO EN MARCA DE AGUA (si está logueado) */
     ═══════════════════════════════════════════════════════════════ */
  
  /* Marca de agua personalizada con info del usuario */
  body:not(.dr-admin).dr-user-logged .dr-product-image-frame::after {
    content: attr(data-user-watermark);
    font-size: 32px;
  }
  
  /* ═══════════════════════════════════════════════════════════════
/* BLOQUEO DE IMPRESIÓN EN MÓVILES */
     ═══════════════════════════════════════════════════════════════ */
  
  @media print {
    body:not(.dr-admin) img,
    body:not(.dr-admin) .dr-protected-image,
    body:not(.dr-admin) .dr-bg-protected {
      display: none !important;
    }
    
    body:not(.dr-admin)::after {
      content: '🔒 Contenido protegido - Design Reyes' !important;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 24px;
      color: #7c3aed;
      opacity: 1 !important;
    }
  }
  
  /* ═══════════════════════════════════════════════════════════════
/* RESPONSIVO - AJUSTES PARA TABLETS */
     ═══════════════════════════════════════════════════════════════ */
  
  @media only screen and (min-width: 481px) and (max-width: 768px) {
    body:not(.dr-admin)::after {
      font-size: 16px;
      line-height: 100px;
    }
    
    .dr-product-image-frame:not(.dr-admin)::after {
      font-size: 42px;
    }
  }
  
  /* ═══════════════════════════════════════════════════════════════
/* AJUSTES PARA MÓVILES PEQUEÑOS */
     ═══════════════════════════════════════════════════════════════ */
  
  @media only screen and (max-width: 480px) {
    body:not(.dr-admin)::after {
      font-size: 12px;
      line-height: 60px;
      letter-spacing: 15px;
    }
    
    .catalog-card:not(.dr-admin) .card-image::after,
    .design-card:not(.dr-admin) .design-card-img-wrapper::after {
      font-size: 18px;
      letter-spacing: 3px;
    }
    
    .dr-product-image-frame:not(.dr-admin)::after {
      font-size: 28px;
      letter-spacing: 6px;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════
/* MODO PAISAJE - AJUSTES ADICIONALES */
   ═══════════════════════════════════════════════════════════════ */

@media only screen and (max-width: 768px) and (orientation: landscape) {
  body:not(.dr-admin)::after {
    font-size: 10px;
    line-height: 50px;
  }
}

/* ═══════════════════════════════════════════════════════════════
/* PERMITIR A ADMINS VER SIN MARCAS */
   ═══════════════════════════════════════════════════════════════ */

@media only screen and (max-width: 768px) {
  body.dr-admin::before,
  body.dr-admin::after,
  body.dr-admin .card-image::after,
  body.dr-admin .design-card-img-wrapper::after,
  body.dr-admin .dr-product-image-frame::after {
    display: none !important;
  }
  
  body.dr-admin img {
    pointer-events: auto !important;
    -webkit-touch-callout: default !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
/* ANIMACIÓN SUTIL DE MARCA DE AGUA (opcional) */
   ═══════════════════════════════════════════════════════════════ */

@media only screen and (max-width: 768px) {
  @keyframes watermarkPulse {
    0%, 100% { opacity: var(--watermark-opacity); }
    50% { opacity: calc(var(--watermark-opacity) * 1.3); }
  }
  
  body:not(.dr-admin).dr-watermark-animate::before,
  body:not(.dr-admin).dr-watermark-animate::after {
    animation: watermarkPulse 8s ease-in-out infinite;
  }
}