/* Visor WebAR Lite */ .webar-viewer { position: relative; width: 100%; height: 70vh; min-height: 420px; overflow: hidden; background: #000; border-radius: 10px; } .webar-viewer a-scene, .webar-viewer .a-canvas { border-radius: 10px; } /* Pantalla completa al iniciar (MindAR se posiciona bien así) */ .webar-viewer.webar-fullscreen { position: fixed; inset: 0; width: 100vw; height: 100vh; min-height: 0; z-index: 99999; border-radius: 0; } .webar-viewer.webar-fullscreen a-scene, .webar-viewer.webar-fullscreen .a-canvas { border-radius: 0; } /* La cámara y el canvas deben llenar el contenedor */ .webar-viewer video, .webar-viewer .a-canvas { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; } /* Escáner MindAR centrado. MindAR añade .mindar-ui-overlay a con position:absolute, por lo que se centra respecto a toda la página (no la pantalla) y queda descuadrado. viewer.js lo reubica dentro de .webar-viewer; aquí lo forzamos a llenar el contenedor para que las guías del escáner queden centradas en el viewport. */ .webar-viewer .mindar-ui-overlay { position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; z-index: 5 !important; } /* Botón cerrar */ .webar-close { position: absolute; top: 14px; right: 14px; z-index: 100000; width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 20px; line-height: 44px; cursor: pointer; } .webar-gate { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: radial-gradient( circle at 50% 30%, #2d2b55, #0f0f14 ); } .webar-gate-card { text-align: center; color: #fff; padding: 24px; max-width: 340px; font-family: system-ui, sans-serif; } .webar-gate-card h3 { margin: 0 0 8px; font-size: 20px; } .webar-gate-card p { margin: 8px 0; font-size: 14px; opacity: .85; } .webar-start { margin-top: 14px; background: #6c5ce7; color: #fff; border: none; border-radius: 12px; padding: 14px 28px; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 24px rgba( 108, 92, 231, .5 ); } .webar-start:disabled { opacity: .4; cursor: not-allowed; } .webar-warn { color: #ffb3b3; font-size: 12.5px; margin-top: 14px; min-height: 16px; } .webar-error { padding: 16px; border-radius: 8px; background: #fff3cd; color: #664d03; border: 1px solid #ffe69c; font-size: 14px; }