/* Clase para usar la animación fadeInOut */
.tostadaNSR {
	opacity: 0;
	animation: fadeInOut 3s ease-in-out forwards;
}

/* Clase para usar la animación fadeInOut */
.tostadaLargaNSR {
	opacity: 0;
	animation: fadeInOut 5s ease-in-out forwards;
}

/* Animación que hace fade in, mantiene y hace fade out */
@keyframes fadeInOut {
	0% {
		opacity: 0; /* Arranca en 0 */
	}
	20% {
		opacity: 1; /* Aquí alcanza 1 */
	}
	70% {
		opacity: 1; /* Hasta aquí mantiene 1 */
	}
	100% {
		opacity: 0; /* Termina en 0 */
	}
}

/* Clase para el Div que contiene los comentarios en login de Usuario*/
.comentariosNSR{
	position: absolute;
    top: 9%;
	left: 1%;
    color: inherit;
    background: transparent;
    pointer-events: none; 
}

/* Clase para la caja fija que contiene el logo del Laboratorio */
.logo-flotante {
    position: absolute;        
    top: 8%;                 
    left: 50%;
    transform: translateX(-50%);
    padding: 10px;
    text-align: center;
}

/* Clase para el logo del Laboratorio */
.logo-flotante img {
    height: 180px;
    width: 40vw;
    max-width: 90%;
	min-width: 150px;
    object-fit: contain;
}

/* Ajuste para pantallas chicas */
@media (max-width: 768px) {
    .logo-flotante img {
        width: 80vw;         
        max-width: 350px;
    }
}

/* Contenedor del login */
.login-container {
    max-width: 450px;
    width: 90%;
    margin: 0 auto;
}

/* Ajuste para pantallas chicas */
@media (max-width: 768px) {
    .login-container {
        max-width: 90%;
    }
}