body {
     background-color: #121212;
     font-family: "Montserrat", sans-serif;
     overflow: hidden;
     margin: 0;
     padding: 0;
}

:root {
     --card-width: 85vw;
     --card-max-width: 380px;
}

/* --- LOGIN CENTRADO PERFECTO --- */
#login-view {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0; /* Anclaje total */
     background-color: #ffffff;
     z-index: 1050;
     transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
     
    display: none; /* Oculto por defecto para evitar flicker */
 
 
}

.login-hidden {
     transform: translateY(-100%);
}

.cobaed-green {
     color: #005931;
}
.bg-cobaed {
     background-color: #005931;
}

/* --- ESCENA 3D --- */
.scene {
            perspective: 1000px;
            -webkit-perspective: 1000px; /* Soporte Safari */
            width: var(--card-width);
            max-width: var(--card-max-width);
            /* El height lo inyecta JS */
            display: none; /* Oculto por defecto */
        }

        /* Agrega esto a tu CSS si no lo tienes */


        .card-container {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d; /* Soporte Safari vital */
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
        }

        .card-container.flipped {
            transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg); /* Soporte Safari */
        }

        .card-face {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            backface-visibility: hidden; 
            -webkit-backface-visibility: hidden; /* Soporte Safari vital */
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.6);
            /* Hack para forzar el renderizado 3D en iOS */
            transform: translate3d(0, 0, 0); 
            -webkit-transform: translate3d(0, 0, 0);
        }

        .front { 
            background: white; 
            z-index: 2; /* Le decimos explícitamente qué va arriba */
            transform: rotateY(0deg); /* Safari necesita que el 0 esté explícito */
            -webkit-transform: rotateY(0deg);
        }
        
        .credential-img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 2; }
        
        /* REVERSO CENTRADO PERFECTO */
        .back {
            background: #f8f9fa;
            z-index: 1;
            transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
        }

.holo {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 3;
     background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.4) 50%, transparent 60%);
     opacity: 0.6;
     pointer-events: none;
     transform: translateX(-100%);
     transition: transform 0.1s;
}
/* --- ANIMACIÓN LÁSER DEL ESCÁNER --- */
/* Contenedor del escáner */
#scanner-container { 
    position: relative; 
    overflow: hidden; 
    background: #000;
}

/* El Láser animado */
.scanner-laser {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px; /* Un poco más grueso para que se note */
    background: #00ff00;
    box-shadow: 0 0 15px 3px rgba(0, 255, 0, 0.8);
    z-index: 999; /* Máximo nivel para estar sobre el video */
    animation: scan-line 2s infinite linear;
    pointer-events: none; /* No interfiere con clics */
    display: none;
}

@keyframes scan-line {
    0% { top: 0%; }
    50% { top: 100%; }
    100% { top: 0%; }
}

/* --- LIGHTBOX QR (EFECTO GENIE) --- */
        #qr-lightbox {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.85); /* Fondo oscuro semitransparente */
            z-index: 2000; /* Por encima de todo, incluso de la navbar */
            backdrop-filter: blur(5px);
            display: flex;
            align-items: center;
            justify-content: center;
            
            /* Estado oculto */
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        #qr-lightbox.active {
            opacity: 1;
            pointer-events: auto;
        }

        /* La caja que hace el efecto resorte/genie */
        .lightbox-content {
            background: white;
            padding: 25px;
            border-radius: 20px;
            box-shadow: 0 25px 50px rgba(0,0,0,0.5);
            position: relative;
            
            /* Animación Genie: Empieza pequeño y un poco abajo */
            transform: scale(0.3) translateY(150px);
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto rebote */
        }

        #qr-lightbox.active .lightbox-content {
            /* Termina en su tamaño real y centrado */
            transform: scale(1) translateY(0);
        }