/**
 * Estilos para Marco Canvas Responsivo
 * Sistema ultra-optimizado que no interfiere con AR
 */

/* Canvas principal del marco */
.ar-frame-canvas {
  /* Posicionamiento fijo sin interferir con AR */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10; /* Z-index bajo - no compite con AR */
  
  /* Desactivar completamente interacciones */
  pointer-events: none !important;
  user-select: none;
  touch-action: none;
  
  /* Estado inicial invisible */
  opacity: 0;
  
  /* Solo transición de opacity - ultra eficiente */
  transition: opacity 0.8s ease-out;
  
  /* Suavizado para mejor calidad visual */
  image-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Estados de visibilidad controlados por JavaScript */
.ar-frame-canvas.visible {
  opacity: 0.8;
}

.ar-frame-canvas.hidden {
  opacity: 0;
}

/* Adaptaciones para diferentes dispositivos */
@media screen and (max-width: 768px) {
  .ar-frame-canvas {
    /* Optimización adicional para móviles */
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
  }
}

/* Soporte para pantallas de alta densidad */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi) {
  .ar-frame-canvas {
    /* Calidad óptima en pantallas retina */
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Soporte para modo oscuro */
@media (prefers-color-scheme: dark) {
  .ar-frame-canvas {
    /* Ajuste sutil para modo oscuro */
    filter: brightness(0.95);
  }
}

/* Soporte para animaciones reducidas - accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .ar-frame-canvas {
    transition: opacity 0.3s ease !important;
  }
}

/* Estado de debug para desarrollo */
.ar-frame-canvas.debug {
  border: 2px dashed red;
  background: rgba(255, 0, 0, 0.1);
  z-index: 9999;
}

/* Estados de carga */
.ar-frame-canvas.loading {
  opacity: 0;
  transition: none;
}

.ar-frame-canvas.loaded {
  transition: opacity 0.8s ease-out;
}

/* Optimizaciones finales para performance */
.ar-frame-canvas {
  /* Evitar reflows innecesarios */
  contain: layout style paint;
  
  /* Preparar para compositing si es necesario */
  will-change: opacity;
}

/* Clase especial para activar aceleración GPU si es necesario */
.ar-frame-canvas.gpu-accelerated {
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

/* Reset de estilos que podrían interferir */
.ar-frame-canvas * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}