/* ==============================
   CONTENEDOR PRINCIPAL DEL QR
   ============================== */
.contenedor-qr, .contenedor-login {
    max-width: 80%;         /* ancho máximo del área */
    margin: 5% auto;
    text-align: center;     /* centra el contenido */
    flex: 1;       
}
/* ==============================
   ENCABEZADO
   ============================== */
.encabezado {
  background-color: #144F7D;
  padding: 20px;
  text-align: center;
  border-bottom: 4px solid #0e3f63;
}
.encabezado .logo {
  height: 80px;
}

/* ==============================
   LECTOR DE QR
   ============================== */
#reader {
    width: 100%;            /* ocupa todo el ancho */
    height: auto;          
    margin: 0 auto;
}

/* ==============================
   MENSAJES (válido o error)
   ============================== */
.mensaje {
    margin-top: 15px;
    font-size: 1.2rem;   
    font-weight: bold;
    color: red;         /* si es error, cambiar a verde según JS */
}

/* ==============================
   BOTÓN DE VOLVER
   ============================== */
/* Contenedor del botón centrado */
.boton-volver-qr-container {
    text-align: center; 
    margin-top: 20px;     /* separación de la cámara */
}

/* Contenedor del botón centrado debajo de la cámara */
.boton-volver-qr-container {
    display: flex;             
    justify-content: center;   
    margin-top: 20px;           /* espacio debajo de la cámara */
}

/* Contenedor centrado del botón */
.boton-volver-qr-container {
    display: flex;
    justify-content: center; /* centra horizontalmente */
    margin-top: 5px;        /* espacio arriba */
    margin-bottom: 30px;     /* espacio debajo */
}

/* Botón */
.boton-volver-qr {
    padding: 10px 25px;        /* tamaño del botón */
    background-color: #144F7D;
    color: white;
    font-weight: bold;
    text-decoration: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    display: inline-block;  
    text-align: center;
}

.boton-volver-qr:hover {
    background-color: #0e3f63;
    transform: scale(1.05);
}


/* ==============================
   TARJETA DE LOGIN 
   ============================== */
.login-box {
    background: #f4f4f4;
    border: 2px solid #144F7D;
    border-radius: 10px;
    padding: 30px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    margin: 0 auto;
}


/* Título dentro del box */
.login-box h2 {
    color: #144F7D;
    margin-bottom: 20px;
    text-align: center;
}


/* ==============================
   RESPONSIVO
   ============================== */
@media (max-width: 768px) {
    .boton-volver-qr {
        padding: 10px 20px;
    }

    .contenedor-qr, .contenedor-login {
        max-width: 95%;
        margin: 5% auto;
    }
}